Building browser extensions

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

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

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

webext-domain-permission-toggle -

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.

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.

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.

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

How to add comments to package.json?

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!

import OptionsSync from 'webext-options-sync';

Target respective browsers using .babelrc.

chrome-webstore-upload-cli

• comment
  

guide for publishing on chrome store

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.

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

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

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

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

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

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

• comment
  

hmm wonder if this is useful?

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

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

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.

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
  

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

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

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

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

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

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

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

Using the Firefox addon in headless mode #

Starting with version 56, Firefox can be used in “headless” mode, which is suitable for driving browser-based tests using Selenium and other tools. Headless mode can be enabled using the MOZ_HEADLESS environment variable:

env:
  - MOZ_HEADLESS=1
addons:
  firefox: latest

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext

https://blog.mozilla.org/addons/2019/02/15/extensions-in-firefox-66/

Firefox no longer emits a warning when the manifest property `background.persistent` is set to `true`.

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/commands/update

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android

https://bugzilla.mozilla.org/show_bug.cgi?id=1520119

https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi

The computer with desktop Firefox and your Android device must be connected to the same Wi-Fi network. Desktop Firefox cannot be using a wired connection that routes to the Wi-Fi network; both must truly be on Wi-Fi.

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android#Install_and_run_your_extension_in_Firefox_for_Android

https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Setting_up_extension_development_environment

https://stackoverflow.com/questions/39610205/how-to-make-side-panel-in-chrome-extension

http://extensionizr.com/!#{%22modules%22:[%22hidden-mode%22,%22with-bg%22,%22with-persistent-bg%22,%22no-options%22,%22no-override%22],%22boolean_perms%22:[],%22match_ptrns%22:[]}

https://blog.jakelee.co.uk/creating-a-history-clearing-chrome-extension/

https://www.reddit.com/r/firefox/comments/886wms/what_is_the_state_of_addonextensions_development/

I think you're supposed to call "browser.*" and I would not be surprised if calling "chrome.*" gets deprecated on the long term)

_execute_{browseraction}: works like a click on the extension's browser action.
_execute_pageaction: works like a click on the extension's page action.
_execute_{sidebaraction}: opens the extension's sidebar. Only supported in Firefox 54 and newer.

Ohh thanks! I thought the 'browser console' was just a log at first, apparently you have to enable devtools.chrome.enabled in about:config first for the terminal to show up!

https://stackoverflow.com/questions/36808309/chrome-extension-page-update-twice-then-removed-on-youtube/36818991#36818991

https://extensionworkshop.com/documentation/develop/request-the-right-permissions/#Request_permissions_at_runtime

A good example of this approach is Gesturefy, which offers users the following advice:

https://blog.mozilla.org/addons/

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page

You can also open this page programmatically using the runtime.openOptionsPage() function.

https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css

To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.

https://github.com/http-party/http-server/issues/308
fucking hell, why is that shit so hard???

https://stackoverflow.com/questions/21956683/enable-access-control-on-simple-http-server

@HairOfTheDog The SimpleHTTPRequestHandler doesn’t support the OPTIONS HTTP method. You could add it if you want (read the Python manual about HTTP servers); or you could just not try to access the server like that.

https://github.com/gorhill/uBlock/blob/6c34b3c3c96756b6db7ff2f3a0394472d81cde3e/platform/webext/manifest.json

"options_ui": {
    "page": "dashboard.html",
    "open_in_tab": true
  },

https://github.com/keepassxreboot/keepassxc-browser/blob/develop/keepassxc-browser/manifest.json

"options_ui": {
    "page": "options/options.html",
    "open_in_tab": true
},

getBackgroundPage returns the JavaScript 'window' object for the background page running inside the current extension and not in the content script.

chrome.runtime.sendMessage sends a message to all open extension pages (i.e. background, popup, etc.)
chrome.tabs.sendMessage sends a message to all content scripts from the extension in a given tab (possibly filtered by frame ID)

I think that it works last I checked! There is only a need to get the build
infrastructure working and have an owner on addons.mozilla.org, and for
Mozilla to approve it.

Automate all the things! wink Here people discussed the Chrome Web Store version, but it also applies to AMO sindresorhus/module-requests#66

I know it's not perfect and I would also like to see a Firefox addon, but some friends and I have been using Hypothesis seamlessly in Firefox, both for desktop and for mobile, following the instructions I posted here: https://medium.com/@delahera/hypothesis-web-annotation-mobile-358db1f9ec46

Install kiwi on Android for extension enabled Chromium.