Developing with WebExtensions - very frustrating

Add-ons Development
1

While developing extensions for Fx Quantum, my work-flow is as following:

  • Start Quantum

  • Open "about:debugging"

  • Click "Load Temporary Add-on"

  • Navigate to my extensions folder and select any one of the files

Then:

  • Open (or re-load) a test html page.

  • Test the extension

  • Modify the extension source

  • Reload the extension from the "about:debugging" page

  • Rinse and repeat

The problem is that once the extension is reloaded, it doesn’t seem to “take” until I reload the test page (or reload the extension) several times. I know it’s not “taking” because I attempt to set a badge on the extension’s toolbar icon and create a context menu when the page loads or is activated. They are not appearing every time. I might have to reload 5 or 6 times before I can see the changes. It’s as if Quantum is not completing the reload.

This is very irritating and really slows down development. I have tried using the Fx release version and the developer edition with the same results. Has anyone else seen this behavior?

2

Since FF55 changes were made …
Get rid of directory scans, and especially recursive directory scan, at startup

I also filled a bug …
Files are Cached and not refreshed on Disable/Enable/Restart

I made a request which is still outstanding …
Add Reload to installed addons in about:debugging

3

Your extension seems to not look at what’s already there from your description, but rely on events to update its state. When an extension is installed/reloaded no events are fired for existing tabs. And content scripts with reloading aren’t very fun, yes.

4

Hello Chuck :slight_smile:

  1. make sure to use web-ext tool for development! It will reload your extension when you change your source files, including background script.

  2. if you are developing content-script based extension, you may want to reload the page as well, then put this code to your background script:

    if (_NOT_PRODUCTION_ENVIRONMENT_) {
  browser.tabs.query({url: 'http://your_test_page/'}).then(tabs => tabs.forEach(tab => browser.tabs.reload(tab.id)));
}

You should always try to automate as much as possible.
You can create .bat files that will run the web-ext for specific folders if you are developing several add-ons or versions.

But I agree there should be an easy way to open about:debugging page (like there is Ctrl + Shift + A for opening about:addons page).

1 Like
5

Thanks for the tips Juraj.

I’m trying out the web-ext tool but not having a lot of success. The extension I’m working on uses a background script, a content script, and a few external scripts. The web-ext tool does not load some or all of the external scripts.

For example, I have the following in my manifest.json file:

  "background": {
    "scripts": ["taffy.js","jQuery2.1.4.js","jstree.min.js","pepCommon.js","pepBackground.js"]

},

"content_scripts": [
  {
      "matches": ["http://*/*","https://*/*"],
      "js": ["taffy.js","pepCommon.js","pepContent.js"],
      "run_at": "document_end",
      "all_frames": true
  }
],

When web-ext reloads the extension, I get the following errors in the console:

ReferenceError: TAFFY is not defined pepCommon.js:10:5
TAFFY is not defined pepCommon.js:286

The object ‘TAFFY’ is defined in the ‘taffy.js’ file (the first file to be loaded assuming the files are loaded in sequence). It is apparently being loaded too late or not at all.

Also, when I include your code to reload the test page, I get the error:

_NOT_PRODUCTION_ENVIRONMENT_ is not defined

Is ‘NOT_PRODUCTION_ENVIRONMENT’ supposed to be an internal pre-set constant?

6

Hello again,

The NOT_PRODUCTION_ENVIRONMENT is not a real property, it’s just to make sure you don’t include it in production release.

But the issues you are describing should not be related to web-ext tool. There should be no difference loading your extension through about:debugging screen and using web-ext run command. Make sure you have correct paths to the files.

I’ve check the docs for loading scripts and you are right: “The scripts are loaded in the order they appear in the array.”

7

At least the API of web-ext has an option to chose the initial page. I usually work with a fixed profile and about:debugging in a pinned tab and not with web-ext, but if I do, I call it like this:

(await require('web-ext').default.cmd.run({
	/* ... */
	startUrl: 'about:debugging',
}, {
	shouldExitProgram: false,
}));
1 Like
8

Thank you! You are amazing!

Thanks to you I just found the whole API:

There is also command line version using:
web-ext run --start-url about:debugging

9

Or you can even have web-ext config files (or a package.json) entry to set default params for web-ext, see the generic web-ext guide (not the command reference).

1 Like
10

Amazing!
And it can be even automatically loaded if it’s named properly!

We should have more knowledge sharing discussions like this! :slight_smile:

11

I’d really recommend reading the stuff that’s already on MDN, it covers most of the shareable knowledge.

The package.json config entry point is not yet documented, btw.