The Firefox Nightly Android add-on content script will only load when the add-on popup is opened

After creating an add-on that manipulates a specific site's HTML based on user settings in the add-on's 'popup', I encountered an issue. The add-on is supposed to run a continuous content script when the user opens the site, but it only works if the user loads the site, opens the add-on 'popup', returns to the site, and then the script kicks in.

I need help fixing this issue. How can I make the script run automatically when the user opens the site? This problem seems to be specific to Android, as it does not occur on Chrome or desktop Firefox.

Below is the manifest.json code snippet:

{
    "name": "9gag post filter",
    "description": "A post filter for 9GAG.com",
    "version": "1.1.2",
    "browser_specific_settings": {
        "gecko": {
          "id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4d4145584e43474348495a6c4b414d4540024f4341">[email protected]</a>",
          "strict_min_version": "42.0"
        }
    },
    "manifest_version": 3,
    "permissions": [
        "storage"
    ],
    "action": {
      "default_popup": "index.html"
    },
    "content_scripts": [{
        "css": ["assets/css/content.css"],
        "js": ["assets/js/jquery_slim_mini.js","assets/js/content.js"],
        "matches": ["https://9gag.com/*"]
      }]
}

If you wish to view the complete source code, it is available on GitHub (it's open source).

javascriptandroidfirefox-addonfirefox-nightly

Answer №1

In my experience, the only effective solution I've come across is to make adjustments to the manifest file and revert back to Manifest v2, utilizing examples from mv2 such as the classic Beastify demonstration. Although this approach may not be ideal due to its incompatibility with Chromium-based browsers, it is a noteworthy consideration.

Answer №2

This particular issue is not limited to just Android devices; it also affects Desktop Firefox when new extensions are installed.
(Note: If you update from Manifest v2, this issue will not occur)

The root cause of this problem lies in the lack of permissions. In Manifest v3, Firefox does not automatically grant execute permissions to the content_scripts domain.

Requested permissions and user prompts

Although host_permissions are considered optional by most browsers, requesting permissions using this key may result in users being prompted to grant those permissions during installation. However, as of June 2023, Safari, Firefox, and certain Chromium-based browsers do not prompt users during installation.
host_permissions - Mozilla | MDN

To address this issue, it is necessary to explicitly specify host_permissions and request permissions manually.

"host_permissions": [
    "https://9gag.com/"
]

const manifest = chrome.runtime.getManifest();
const permissions = { "origins": manifest.host_permissions };
if (!await chrome.permissions.contains(permissions)) {
      await chrome.permissions.request(permissions);
}

For more information on this issue, refer to: 1810910 - Extension manifest v3 content_scripts registered scripts are not run

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

Encountering an issue with Masonry's container.append that is causing an Uncaught TypeError: Object does not possess the filter method

I have implemented infinite scroll on my website to display images. The images are arranged using a tool called masonry. Initially, I only load 10 images into the #container div when the page loads. These images are aligned perfectly with no errors in the ...

javascriptjqueryhtmljquery-masonryinfinite-scroll

I have a query regarding the process of filtering data, specifically in the context of

When working with express and mongoose, I often encounter complex queries. As a workaround, I typically retrieve objects by their ID like this: const ticketObj = await Ticket.findById(ticketId); I then use JavaScript's filter method to further narro ...

javascriptnode.jsmongoosefilter

Module is absent in JavaScript but present in TypeScript

As I delve into coding a vscode extension by following a tutorial, I encountered an issue with importing in my server.ts file. The directory structure looks like this: ...

javascripttypescriptnpmvisual-studio-codevscode-extensions

experiencing a problem with the scrollTo() function

I am encountering difficulty in finding the correct X and Y coordinate values to move an image using mouse scroll within a div. I have included my sample code below. I have successfully managed to scroll the image without using a div. Can anyone assist m ...

javascripthtml

I want to retrieve a complete HTML page using an AJAX request

I am trying to retrieve the content of a specific page, but encountering issues when using this function: function getResult() { var url="http://service.semanticproxy.com/processurl/ftfu27m3k66dvc3r43bzfneh/html/http://www.smallbiztechnology.c ...

javascriptajaxopencalais

The file field appears to be empty when sending a multipart/form-data request via AJAX

I'm encountering an issue when attempting to submit a multipart/form-data using AJAX. Here is the HTML code snippet: <form id='form_foto' method='post' enctype='multipart/form-data'> <input type='hidden ...

javascriptjqueryajaxforms

Tips for overcoming a script error within the body of a Next.js project

I encountered an error in my _document.js file when trying to add a script to the body of my document. Here is the specific error message that was returned: https://i.stack.imgur.com/QG5zb.png ./pages/_document.js Error: x Expected '}', got &a ...

javascriptreactjsnext.js

exploring the ins and outs of creating computed properties in TypeScript

How can I store an object with a dynamically assigned property name in an array, but unsure of how to define the array properly? class Driver { public id: string; public name: string; constructor(id , name) { this.id = id; th ...

javascripttypescript

How can I maintain the consistent speed of the Javascript timer even when the .deck is clicked?

Currently, I'm working on creating a memory card game. In this game, the deck of cards is represented by the class .deck. Strangely enough, every time I click on a card, the timer starts to speed up instead of keeping a consistent pace. How can I tack ...

javascriptjquery

What is the best way to insert hyperlinks within every cell of a table using Angular?

I am currently working on a table created with ng-repeat in Angular. The cells are populated by variables in the scope. <tbody> <tr ng-repeat="item in items" myDirective> <td>{{item.title}}</td> <td>{{item.field}}&l ...

javascripthtmlangularjs

Converting Byte strings to Byte arrays in Node.js using JavaScript

Currently facing a challenge while trying to complete the pythonchallenge using JS and Node. Stuck on challenge 8 where I need to decompress a string using bzip2: BZh91AY&SYA\xaf\x82\r\x00\x00\x01\x01\x80\x ...

javascriptpythonnode.jsbzip2

What is the best way to locate a div element with a specific style?

What is the method to locate a div element by its style? Upon inspecting the source code in IE6, here is what I find: ...an><div id="lga" style="height:231px;margin-top:-22px"><img alt="Google"... How can this be achieved using JavaScript? ...

javascripthtml

The Ajax query returned a successful response, yet it unexpectedly triggered an error

Currently, I am delving into the realm of mongodb. I have integrated Express, Body-Parser, and Mongoose into my project, and I'm retrieving data from an online mongodb database hosted on mlab. Everything seems to be functioning smoothly as I've t ...

javascriptajaxmongodbexpressbody-parser

Order a nested array according to the inner value, using a different array as a reference

Having two arrays at hand, array1 requires sorting based on its inner key, role, as per array2. Despite attempting various solutions, I have hit a roadblock due to my lack of understanding on the necessary steps to proceed. The current output for Array1 i ...

javascriptarrays

How to reference an object from an external file in TypeScript using Ionic 2 and Angular 2

I am currently developing a mobile application with Ionic2 and have integrated a simple online payment service called Paystack for processing payments. The way it operates is by adding a js file to your webpage and then invoking a function. <script> ...

javascriptangulartypescriptionic2

Enhancing Android app efficiency by improving performance in accessing Json file data from various classes

As I delve into utilizing Json files for my app, the question arises regarding the most efficient method to store and access this data across multiple classes. Currently, I am working with a Json file containing various currency conversion rates. The chal ...

javaandroidjsonperformance

Is it possible to validate a template-driven form without using the model-driven approach?

Attempting to validate a template-driven form in Angular without two-way data binding has proved to be challenging. I have successfully implemented validation using [(ngModel)], but running into an error when trying to validate the form without the MODEL p ...

javascriptangulartypescriptvalidation

having trouble adjusting the width of the buefy modal

Currently, I am working with vuejs alongside bulma and buefy. Specifically, I am utilizing the buefy modal feature and attempting to customize the modal width by utilizing its 'width' property. Thus far, I have attempted specifying the width in t ...

javascriptvue.jsbulmabuefy

Converting object values to strings is a common practice during JSON posting operations

I encountered an issue with a date object when sending it to a NodeJS server. While the object is still preserved, the time gets converted to a string during the process. Is there a way to prevent this conversion? I tried parsing the object but received an ...

javascriptajaxnode.js

"Integrate a URL segment into the primary URL with the help of AngularJS or JavaScript

One interesting case involves a URL path that is structured in the following way. http://localhost:12534/urlpart1/urlpart2?querystring=140 The challenge here is to replace "urlpart2" with "urlpart3" using either javascript or AngularJS. One approach is t ...

javascriptangularjs