[SOLVED] Both content_scripts all_frames true or false not working on top document

Hello

I’m writing a webExtension and I’ve been facing a problem for several days

I have two content_scripts

  • one for the top documents only
  • one for every iframe in the documents

Both content_scripts use a common set of methods, gathered in another js file

I can’t find a way to build the manifest.json file and achieve a succesfull behaviour.

NB: all files shown here are of course a very simplified version of the actual files.

manifest.json

{
  "manifest_version": 2,
  "name": "testContents",
  "description": "Test of content_scripts all_frames true and false",
  "version": "0.0.1",
  "permissions": ["<all_urls>"],
  "content_scripts": [
    { "all_frames": false,
      "js": ["common.js", "content_top.js"],
      "matches": ["<all_urls>"]
    },
    { "all_frames": true,
      "js": ["common.js", "content_all.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

common.js

"use strict";
const mark = {id: "common"};

content_all.js

"use strict";
(() => {
  try {
    console.debug("in content_all", mark.id, window.location.href, window.frameElement);

    Array
      .from(document.querySelectorAll("textarea"))
      .forEach(elem => elem.addEventListener("focus", event => console.debug("focus", event), {capture: false}));
  } catch (error) {
    console.debug(error);
  }
})();

content_top.js

"use strict";
(() => {
  try {
    console.debug("in content__top", mark.id, window.location.href, window.frameElement);
  } catch (error) {
    console.debug(error);
  }
})();

The point of this over simplified version of the WebExtension I’m writing is that on the debug console, all focuses in textareas are logged, whether they appear in the top level document or in any iframe.

Build the extension, visit this test website and open the console : in a perfect world, every change of focus should be logged.

In this world though, only the focuses in the iframes are logged, not the ones in the main document.

NB: I tested this exact same code on Chrome, and it works as expected!

I’ve beeing struggling with that for a few days, I’m banging my head!

Can anyone help and shed some light?

Thanks!

Have you looked for errors that indicate that one of the content scripts couldn’t be inserted? Have you tried only having one of the two groups inserted?

I don’t know how to check if the content_scripts are inserted, but they sure don’t appear both on the debugger view of the developer tool (only common.js and content_top.js appear in the sources panel)

I can get them both to appear and I can get the correct behavior by removing the common.js mention on the top content script in the manifest.

But I need that common.js…

Pretty sure that is due to both groups sharing a scope and the second time you insert common.js would redefine a const, so that’s an exception that will abort the script. If that is true you should be able to just include common.js in the all_frames group and move that in front of the top group, so it’s inserted first.

1 Like

YES!

Thank you

Placing the all_frames:true block in front on the all_frames:false one and removing the reference to common.js in this one works!

And it still works in Chrome with this new layout.

Thank you very much !

1 Like