Obtaining page information from a frame script in e10s-enabled Firefox: A guide

One of the challenges I'm facing is with my Firefox extension, where a function loads page information using the following code:

var title = content.document.title;
var url = content.document.location.href;

However, with the implementation of multi-process Firefox (Electrolysis/e10s) that doesn't support direct content access, this method no longer works. I am attempting to refactor this code into a frame script, but I'm encountering difficulties in understanding how to "call" this code due to its asynchronous nature. Below is what I believe should be a simple frame script:

// Frame script
function getPageInfo()
{
  sendSyncMessage("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="68051145090c0c45070628050d460b0705">[email protected]</a>:page-info-loaded", {
    pageURL : content.document.location.href,
    pageTitle : content.document.title
    });
}

addMessageListener("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8692c68a8f8fc68485ab868ec5888486">[email protected]</a>:get-page-info", getPageInfo);

I believe the relevant chrome code should resemble the following:

// Chrome script
function onContextItem()
{
  let browserMM = gBrowser.selectedBrowser.messageManager;
  browserMM.loadFrameScript("chrome://my-add-on/content/frame-script.js", true);
  browserMM.sendAsyncMessage("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcb1a5f1bdb8b8f1b3b29cb1b9f2bfb3b1">[email protected]</a>:get-page-info");
}

function onInfoLoaded(message)
{
  var url = message.data.pageURL;
  var title = message.data.pageTitle;
  // Perform actions based on url and title
}

gBrowser.selectedBrowser.messageManager
  .addMessageListener("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe2f6a2eeebeba2e0e1cfe2eaa1ece0e2">[email protected]</a>:page-info-loaded", onInfoLoaded);

The challenge lies in my incomplete understanding of whether (a) this approach is correct or (b) how the timing aspect plays out. Due to the asynchronous messaging system, there's uncertainty if the data I require will return in time for use. None of the examples provided by Mozilla seem to align with my specific needs. Could I be overlooking something evident? Are there superior examples demonstrating how to adapt extension code to accommodate e10s?

javascriptfirefoxfirefox-addone10s

Answer №1

(a) The correct approach for handling this situation.

It is important to only register the frame script once, rather than with each function call. Additionally, if you set the delayed flag on a specific browser MM, there is no need to set it again.

Furthermore, listeners should be removed upon addon shutdown, and self-destruct messages should be sent to frame scripts to prevent lingering and potential buggy behavior in partly-shutdown code.

(b) Understanding the timing involved here.

Messages will be processed in the order they are delivered, except for some internal high priority messages that may interrupt the queue. This ensures that the frame script is fully added and initialized before subsequent messages are processed.

Given the asynchronous nature of this messaging system, there's no guarantee that the data I need will return in time for use.

To accommodate this, logic must be adjusted to work asynchronously by waiting for responses, much like waiting for an XMLHttpRequest callback in traditional web programming.

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

Issue with updating input value during keyup event in Android Chrome specifically

Check out this straightforward jsfiddle: https://jsfiddle.net/gq9jga4q/33/ <input type="text" id="kbdhook" /> <div id="result" >1: </div> <div id="result2" >2: </div> <div id="result3" >3: </div> $('#kbdh ...

javascriptandroidjqueryhtmlgoogle-chrome

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

I'm feeling a bit confused regarding reducers and dispatchers. While both receive actions as parameters, it doesn't necessarily mean that the actions I use in my dispatchers are the same as those used in my reducers, correct? For example, if I h ...

javascripttypescriptdesign-patternsredux

Guide on attaching an onclick event to a button created with a string in Next.js?

<div onClick={(event) => this.addToCart(event)}> <ReactMarkdownWithHtml children={this.props.customButton} allowDangerousHtml /> </div> In my current situation, I am facing an issue with the code above. The button is being rendered ...

javascripthtmlreactjsnext.js

What methods can be used to authenticate the user's input?

I am facing an issue with my program where it breaks if there is a space behind the last number entered. I want to prevent the function from breaking when a space is entered. I tried using $.trim but couldn't get it to work. I also attempted using an ...

javascripthtml

React's `setState` function seems to be failing to hold onto

Recently, I've been challenged with creating an infinite scroll loader component. However, I'm facing a peculiar issue where my 'items' array is constantly resetting to [] (empty) instead of appending the new results as intended. A cou ...

javascriptreactjsnext.jsfetch

The use of "app.use("*") appears to be triggering the function repeatedly

app.use("*", topUsers) is being invoked multiple times. The function topUsers is called repeatedly. function topUsers(req, res, next){ console.log("req.url", req.url) findMostUsefullReviewsAggregate(6) .then(function(aggregationResult){ ...

javascriptnode.jsexpressmongooseejs

Combining Two Models in Sails.js

I'm facing an issue with linking two models in sails. I have two models: 'Singer' and 'Country'. In the 'Singer' model, I have an attribute 'singer_country' which represents the id of the 'Country' mod ...

javascriptmongodbsails.jsejs

Using Jest functions as object properties results in undefined behavior

I am faced with a challenge in my class where I need to mock an object along with its properties intercept(context: ExecutionContext) { const response = contect.switchToHttp().getResponse() // the chain that needs to be mocked if (response.headersSent ...

javascripttypescriptunit-testingtestingjestjs

How about "Incorporate Google Auth into your Vue.js project with modular

I'm on the search for a project that showcases using Vue.js and the Google client library to authenticate with JavaScript, but without the need for transpilers, bundlers, or Node/npm. Does anyone know of such an example out there? I simply want to cre ...

javascriptgoogle-chromevue.jsgoogle-oauth

SyntaxError: Unexpected '<' symbol found in JavaScript file while attempting to import it into an HTML document

This issue is really frustrating me In my public directory, there is an index.html file Previously, I had a newRelic script embedded within the HTML in script tags which was functioning properly Recently, I moved the script to a separate JavaScript file ...

javascripthtml

The first name of the user is not shown following the completion of the registration

I'm currently developing an application using React and Node.js. In the frontend, I have implemented a functionality where upon logging in, users are redirected from the /login route to the root route and greeted with their first name. However, when a ...

javascriptreactjsnode.js

Error in Node Express server: Status code 0 is not valid

As a beginner node.js/js programmer, I am encountering an error code while trying to make a POST request on my application. The error message reads as follows: Error: [20:22:28] [nodemon] starting `node app.js` Running server on 3000 Mon, 27 Jun 2016 19:2 ...

javascriptnode.jsmongodbexpresswebstorm

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

I currently have a Toc element in my HTML with the property position: fixed. (This means it remains in place as you scroll) My goal is to prevent Chrome's Find Text feature from recognizing text within that Toc element. (Ideally using JavaScript) ...

javascripthtmlgoogle-chromefind

Removing zeros from a one-dimensional tensor in TensorFlow.js: A step-by-step guide

If I have a 1D tensor (distinct from an array) with the values [0,2,0,1,-3], my goal is to retrieve only the non-zero values. Using the example provided, I want to receive [2,1,-3] as the output. Is there a way to achieve this in TensorFlow.js? ...

javascripttensorflow.js

Proper method for calling a function within a specific scope

I am utilizing user-contributed modules that I aim to avoid editing in order to make upgrades easier. My goal is to enable users to browse for a CSV file on the local filesystem, parse it, and display it in a dynamic table. For this task, I am using PapaP ...

javascriptangularjsangularjs-scope

Changing the contents of a global array in JavaScript

$(document).ready(function(){ var currArray=null; var group=null; var admin=null; var equipment=null; var student=null; console.log("after get array info"); for(var i=0; i<equipment.length; i++) { console.log("equipment at index after get array info ...

javascriptjqueryarrays

What could be causing the malfunction of client components in NextJS 13.3.0 with experimental features?

My understanding of the beta documentation suggests that I need to include "use client" at the top of my client component in order for it to be defined as such. This allows me to use it within server components, leaves, or layouts. With that in ...

javascriptreactjsnext.jsbeta

Tips for sending multiple variables in a loop as JSON data through an AJAX request

I need assistance with the code below. I am trying to pass the value[i] into a data string in a json ajax post submit. Essentially, my goal is to gather all the checked values in a form and insert them into an existing json data string using ajax. This is ...

javascriptjqueryajaxjson

Determine the number of rows in the Tabulator's table

Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...

javascripthtmlcssjsontabulator

Inject data into an Angular 2 template

Does anybody know of a method to pass variables to templates in Angular2? Suppose I have the following code snippet: <div *ngFor="foo in foos"> <ng-container *ngTemplateOutlet="inner"</ng-container> </div> --------------- <n ...

javascriptangular