đź“• Node [[webext]]
đź“„ webext.md by @karlicoss

Table of Contents

tips etc

Apply the Javascript best practices [[js]]

use

  • Flow or Typescript
  • ES6
  • Promise API
  • Fetch API

addons.mozilla.org publishing [[amo]]

releasing new PUBLIC version on AMO

apparently doesn’t work through webext regardless. once it’s autosigned, you’re screwed??
so to publish on AMO you always have to upload the zip

  • withsecrets ./build –firefox –release –lint
    dump the zip extension
  • choose to upload it AS LISTED on AMO
  • git archive master –output=promnesia-source.zip – upload source

huh. interesting, it seemed to have published instantly…

  • [2020-05-19] and again, published immediately… odd!

[2019-08-18] fregante/Awesome-WebExtensions: A curated list of awesome resources for WebExtensions development. [[promnesia]] [[grasp]] [[webext]]

Chrome Webstore Upload - Upload the extension to the Chrome Web Store via cli (or on Travis, automatically).

[2019-09-02] https://github.com/LinusU/wext-shipit this works also for firefox? [[webext]] [[firefox]]

[2019-08-18] use sinon-chrome? Mocks the Chrome Extensions API for testing [[grasp]] [[promnesia]] [[webext]]

[2019-08-28] Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks [[html]] [[webext]]

https://www.html5rocks.com/en/tutorials/offline/quota-research/

[2019-09-07] To do this research, I have built a tool called Browser Storage Abuser to minimize the manual work. You can store as much data as possible to see the limit of each storage on your browser.

[2019-09-07] Android firefox: For IndexedDB, you can use up to 50MB on desktop, 5MB on mobile for free. However, the user can allow the limit to be removed by granting permission.

[2019-05-01] telotortium/org-capture-extension at native-messaging-host

https://github.com/telotortium/org-capture-extension/tree/native-messaging-host

Native Messaging Host
This is a version of the Org Capture Extension using the Chrome Native Messaging host

[2019-08-10] hmm firefox also got it?

[2020-02-15] ok, seems tricky, and apparently requires installing via OS

[2019-09-08] fregante/webext-options-sync: Helps you manage and autosave your extension’s options. Chrome and Firefox. [[promnesia]] [[grasp]]

webext-domain-permission-toggle -

[2019-08-29] javascript - Chrome messaging: chrome.runtime.sendMessage not working on the newest release 49 - Stack Overflow [[webext]]

This is the intended behaviour. Messages were not supposed to be received by the sending page. The old behaviour was a bug. This is discussed in these bug reports: 479425 479951.

browseraction impacts presense of menu item on android.. [[webext]]

[2019-10-27] Re: [fregante/webext-options-sync] feat: optionally use chrome.storage.local (#19) - karlicoss@gmail.com - Gmail

I'd rather not offer this option because I think cross-device sync is always preferable from the user's point of view, but I'm willing to add this for extensions with options that are meant to be local (e.g. a port number)
PR welcome, documentation included.

[2019-09-08] let the user decide what storage type shall be used by obama · Pull Request #8 · fregante/webext-options-sync

[2019-09-08] notlmn/browser-extension-template: Barebones boilerplate with webpack, options handler and auto-publishing [[grasp]] [[webext]]

https://github.com/notlmn/browser-extension-template

Features
    Use modern Promise-based browser.* APIs webextension-polyfill.
    Auto-syncing options.
    Auto-publishing with auto-versioning and support for manual releases.
    Extensive configuration documentation.

[2020-02-08] Discontinuing support for beta versions | Mozilla Add-ons Blog

AMO supports signing self-hosted (unlisted) versions, which we believe is a good replacement. With self-hosted versions, developers can create multiple development update channels if needed. They can easily move users between channels. The main caveat is that the files and update mechanisms need to be hosted by the developer

[2020-02-15] How to add comments to package.json? - DEV Community 👩‍💻👨‍💻 [[toblog]]

How to add comments to package.json?

[2020-02-15] xo - npm

Opinionated but configurable ESLint wrapper with lots of goodies included. Enforces strict and readable code. Never discuss code style on a pull request again! No decision-making. No .eslintrc or .jshintrc to manage. It just works!

[2020-02-15] browser-extension-template/options-storage.js at master · notlmn/browser-extension-template

import OptionsSync from 'webext-options-sync';

[2020-02-15] notlmn/browser-extension-template: Barebones boilerplate with webpack, options handler and auto-publishing

Target respective browsers using .babelrc.

[2020-02-15] DrewML/chrome-webstore-upload-cli: Upload/Publish Chrome Web Store extensions from the CLI [[webext]]

chrome-webstore-upload-cli
  • comment

    guide for publishing on chrome store

[2020-02-21] Choosing a browser to write extensions for | Lobsters

Thanks for the advice! I was actually inspired to go down this route by seeing the things you’ve been building. I think my interests are similar, but not quite the same.
There are two main extensions I want to build. First, a way to archive and mark up webpages. There is a Chrome extension called Weava that does something similar, but it’s SaaS and I doesn’t seem to have a convenient export format.
Second, I would like better history tools. In particular, often have the problem that I read an article or page and want to link to it in a blog post (or similar), but I’ve forgotten how I found it. I’d like an extension that can maintain “chains” of followed links so that I can always look up how I found something.
I’m happy to get in touch and consider collaborating if you’re interested.

[2020-02-18] mozilla/web-ext: A command line tool to help build, run, and test web extensions

Hi! This tool is under active development. To get involved you can watch the repo, file issues, create pull requests, or ask a question on dev-addons

[2020-02-18] Add `web-ext submit` to submit listed add-ons to AMO · Issue #804 · mozilla/web-ext

web-ext submit would submit to amo only. If you want the zip you can already use web-ext build

[2018-11-08] Shraymonks/flow-interfaces-chrome: Flow interface declarations for the Chrome extensions API [[js]] [[flow]]

https://github.com/Shraymonks/flow-interfaces-chrome/

npm install --save-dev flow-interfaces-chrome

[2020-02-17] Introducing Prism: An awesome new syntax highlighter | Lea Verou

chrome got far better profiling, better debugging information + screenshots [[webext]]

ugh, can’t force webpack/chrome into using date in the version… [[webext]]

https://developer.chrome.com/apps/manifest/version

[2020-04-05] roam-toolkit/webpack.config.js at master · roam-unofficial/roam-toolkit [[webext]]

new webpack.DefinePlugin({
			'NODE_ENV': JSON.stringify(nodeEnv),
			'WEB_BROWSER': JSON.stringify(webBrowser),
		}),
  • comment

    hmm wonder if this is useful?

[2018-03-29] how webext works?

background runs all the time. communicate with extension via message passing. TODO runtimehandlers?
content scripts have no access to background
make sure you return false at the end

logging

from content page, console.log goes to the page console, whereas from the rest to background.html

[2020-11-04] softvar/awesome-web-storage: Everything you need to know about Client-side Storage. [[webext]] [[js]]

[2020-05-14] Let’s guess what Google requires in 14 days or they kill our extension | Hacker News [[webext]]

In practice I was able to use native messaging to spawn the executable but to actually talk with it I needed to use a websocket, kind of defeating the point.

for fucks sake. releasing even without ‘unlisted’ channel doesn’t make it automatically submitted for manual review???

[2020-02-15] ok, first time you need to create manually; after that, get the id (it’s public, so ok to put in a git repo) and use it with the build script

[2020-05-17] listed vs unlisted

so according to this https://blog.mozilla.org/addons/2017/01/26/mixing-listed-and-unlisted-on-amo , you can have mixed self distributed/AMO with the same extension id, but not the same version
so adding –unlisted is a reasonable way to beta test
the only confusing bit is why it is still queueing for reviews??

ugh why did I end up with several versions of grasp on AMO??

it feels that signing is enough to upload. next time try waiting for a bit..
https://addons.mozilla.org/en-US/developers/addons

[2020-05-24] Manage Events with Background Scripts - Google Chrome

The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests. The webRequest API is incompatible with non-persistent background pages.

[2020-05-13] Let’s guess what Google requires in 14 days or they kill our extension | Hacker News [[google]]

[2019-07-07] client/security.rst at 734e3a25318364819a8c38ef881e4788a2b06365 · hypothesis/client [[webext]] [[security]]

https://github.com/hypothesis/client/blob/734e3a25318364819a8c38ef881e4788a2b06365/docs/developers/security.rst

[2019-08-04] For example: in order to draw highlights, the annotated page needs to know the location of annotations, but it does not ever need to know the body text of an an annotation, and so it should not be possible to expose this over the messaging interface.

[2020-11-09] Web Developer’s Toolbox – Add-ons for Firefox (en-GB) [[webext]]

android debugging

web-ext run --target=firefox-android --android-device=XXXX

[2019-08-10] remote debugging; use Shift-F8 to open web ide https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Enable_remote_debugging_in_Firefox_for_Android

[2019-02-16] Creating a Chrome extension in 2018: The good, the bad and the meh | Checkly

https://checklyhq.com/blog/2018/08/creating-a-chrome-extension-in-2018-the-good-the-bad-and-the-meh/

[2019-08-10] basic intro with examples of testing and explaining the extensions architecture

[2019-06-01] Creating a Chrome extension in 2018: The good, the bad and the meh [[grasp]]

https://blog.checklyhq.com/creating-a-chrome-extension-in-2018-the-good-the-bad-and-the-meh/

// boots a Chrome instance using Puppeteer and adds the extension we build in the earlier test
  test('it installs the extension', async () => {
    const options = {

[2019-06-29] Using Firefox WebExtensions with Selenium

https://intoli.com/blog/firefox-extensions-with-selenium/
nice, this guy contributed to selenium?

[2019-06-29] Standard8/example-webextension: Example repository containing templates and good practices for creating a WebExtension for Firefox

https://github.com/Standard8/example-webextension/

Example repository containing templates and good practices for creating a WebExtension for Firefox

[2019-07-08] GUI and Headless Browser Testing - Travis CI [[ci]]

https://docs.travis-ci.com/user/gui-and-headless-browsers/#using-the-chrome-addon-in-the-headless-mode

Loading pushes...

Rendering context...