New feature in Safari extension: transferring window object from inject script to global page

Is it possible to transfer the window object from an injected script to a global.html page?

I am attempting to pass the window object as part of an object to the global page. However, when I try to dispatch the message from the "load" listener function, it results in a type error.

Below is the code:

window.addEventListener("load", onDocLoad);

function onDocLoad()
{
    var msg = new Object();

    msg.url = window.location.href; // This part works fine
    .....
    msg.win = window; // When this line is included, it throws a type error at safari.self.tab.dispatchMessage("XXX",msg);
    safari.self.tab.dispatchMessage("XXX",msg);  
}

The message dispatching functions correctly and other data can be passed without any errors, except for the window object. How should I go about fixing this issue?

Answer №1

According to the documentation, passing objects like HTMLWindow is not supported:

The message data can be of various types including boolean, numeric, string, array, RegExp object, or any data that follows the W3C standard for safe structured cloning. It may also be null, undefined, or empty in cases where no data is required for the command.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my ASP.Net MVC script bundles to load on every page view?

I'm a bit puzzled. The _layout.cshtml page I have below contains several bundles of .css and .js files. Upon the initial site load, each file in the bundles is processed, which makes sense. However, every time a new view is loaded, each line of code f ...

What is the best way to ensure that one method waits for another method to complete before proceeding?

Below is a React method that needs completion for uploading images to cloudinary and setting the URL in state before executing the API call addStudent. The order of execution seems correct at first glance, but the last API call crashes due to base64 data n ...

What is the best way to implement a multi-row form in Vue.js?

Form Structure: <card-wrapper v-for="(passenger, index) in form.passenger" :key="index" :icon="['fas', 'user']" :title="`Passenger ${index + 1}`" class="mb-5" > <validation-observer ...

When attempting to declare a functional component in React utilizing styled-components in TypeScript, an error is encountered stating "No overload matches this call."

Playground https://codesandbox.io/s/typescript-type-checking-question-0b42t Sample Code type BadgeTypes = { success: string; secondary: string; alert: string; text: string; }; type Theme = { fonts?: object; borderRadius: string; primary?: o ...

What is the best way to populate nested elements with jQuery?

I am trying to showcase the latest NEWS headlines on my website by populating them using Jquery. Despite writing the necessary code, I am facing an issue where nothing appears on the webpage. Below is the HTML code snippet: <div class="col-md-4"> ...

What steps are involved in implementing Local fonts in theme UI for Next JS?

I am currently developing an application using next JS with [theme-UI][1]. However, I need to implement local or custom fonts in my project and I'm unsure of how to do this. Below is the current theming setup: const theme = { fonts: { ...

Is there a way to prevent the DOM from loading images until Angular has successfully injected the correct variables?

Having some trouble with this block of code I have: <div class="image" ng-repeat="image in images"> <img src="{{image.url}}"></img> </div> It seems that the image sources are being set correctly, but I keep getting an error wh ...

Tips for retrieving the user-input value from an HTML text field

Exploring the world of JS, I set out to create a basic calculator after just one week of lessons. However, I hit a roadblock when trying to extract user-input values from my HTML text fields. Here's a snippet of my html: <div class="conta ...

Utilizing ng-class for dynamic routing and controlling

I am currently in the process of developing a dynamic framework using AngularJS. My plan involves allowing users to add new templateUrl and controller from a JSON file, like the one shown in templates.json: { "pages" : [ { "name" : "home" ...

Encountering a problem while creating a Page Object in webdriver.io - getting the error "setValue is not a function" or "cannot read property 'setValue' of undefined"

While working on a webdriver.io automation project, I encountered an issue with recognizing objects in my page object file (login.po.js) when calling them in the test spec file (test.spec.js). The error message displayed is LoginPage.username.setValue is n ...

Node.js with PostgreSQL (pg): The client connection has already been established. Reusing the client is not allowed

Currently, I am working on creating a basic register/login system and I'm facing an issue with checking for existing usernames. Here are the steps I've followed: Visit the localhost:3000/users/register page Input all required details and click o ...

It is important to ensure that the user returned by the onAuthStateChanged function in

server admin.auth().createCustomToken(uuid) .then((customToken) => { admin.auth().createUser({ email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed989e889fad88958c809d8188c38e8280">[email protected] ...

Trouble with AngularJS ui-router: template fails to show up

I have been diving into a tutorial on egghead.io that delves into application architecture, tweaking certain components to fit my specific application needs. Just a heads up, I am relatively new to Angular, so I'm hoping the issue at hand is easy to ...

Deleting the v-stepper-header number with Vuetify

I have been searching everywhere in an attempt to resolve this issue, but I have not been able to find a solution. Is there a way to remove the numbers from the v-stepper-header? - Using Vuetify version: 1.5.6 Current: https://i.stack.imgur.com/gLxFX.png ...

Unable to load dynamic data in Angular 2 smart table

Currently, I am utilizing Angular 6 along with smart table by visiting this link: . Everything was functioning smoothly, until the moment I attempted to switch from static to dynamic data: The following code works perfectly and displays all the content ...

Tips for integrating Excel files with NestJS

I'm in the process of developing a REST API that will utilize a third-party API to retrieve specific status information. The URLs needed for this API are stored in an Excel file, which is a requirement for this use case. My goal is to extract the URLs ...

The issue at hand is why the closure is not functioning properly when variables are assigned to the callback of the getCurrentLocation function

Apologies for the extensive amount of code, but it seems like there may be an issue with AppMobi's getCurrentLocation function in this scenario. The problem arises when tapping on list elements triggers an asynchronous getCurrentLocation call which up ...

creating intricate services using ngTagsInput

Integrating ngTagsInput into my blog allows users to add existing or custom tags to new posts. The blog utilizes a firebase datasource accessible through a factory: servicesModule.factory("postsDB", function($resource){ return $resource("https://data ...

Discover the row and column of a selected table cell using vanilla JavaScript, no need for jQuery

In my JavaScript code, I am currently working on creating an onclick function that will display the row and column of a specifically clicked cell in a table. I have successfully implemented functionality to return the column number when the cell is click ...

Error encountered: No matching overload found for MUI styled TypeScript

I am encountering an issue: No overload matches this call. Looking for a solution to fix this problem. I am attempting to design a customized button. While I have successfully created the button, I am facing the aforementioned error. Below is my code ...