I'm archiving this repo. I came across which perfectly solves the issues this project was having.
A simple Firefox extension to make ephemeral text highlights and copy them to the clipboard.
When I'm reading technical books on paper, I sometimes highlight key takeaways as I go, and then come back to write notes summarising the highlighted parts. I want to be able to do this for long web pages.
There are some existing extensions for Firefox (eg. Textmarker), but they tend to either:
-
have a lot of features that I don't want to manage,
-
not have keyboard shortcuts, or
-
have very few users, in which case I prefer not to provide the wide permissions that these features require.
-
No way to sync text, I want the highlights to reappear when I visit the same url twice
npm installnpm run build- browse the manifest.json in the addon folder should to install the addon in
about:debugging
- Some websites don't work with the current logic
- If I highlight something and select the same text twice, it gets double highlighted, it should not be
- Some urls are like http://www.archlinux.com/helloworld, http://www.archlinux.com/helloworld#bottom-content, note both are same webpages, but the URL is different, highlights should reappear for the same page for such type of url's
- Copy the selected text:
Ctrl + Shift + L, or right click > "highlight selection" - Copy all highlights to the clipboard:
Ctrl + Shift + ;, or right click > "copy all selections"
As of [2020-06-27] I'm using this myself, but am holding off on listing it on https://addons.mozilla.org/ until I've fixed a couple of issues.
A minimal example of how to use webpack to package
npm modules so they can be used in a WebExtension.
The example package used by this extension is left-pad, an essential package
in almost any situation.
This example shows how to use a node module in a background script and popup.
It defines two build targets in webpack.config.js, they each
generate a file that includes all modules used the entry point and store it in
the addon folder. The first one starts with background_scripts/background.js
and stores it in addon/background_scripts/index.js. The other one does the
same for popup/left-pad.js and stores it in addon/popup/index.js.
The extension includes a browser action with a popup, which provides an UI for running left-pad on a string with a chosen character. The operation can either be performed with the left-pad module included in the panel's script or in the background script.
This could be infinitely extended - injecting global jQuery, adding babel, react/jsx, css modules, image processing, local modules and so on.
As well as watching the folder with your manifest.json in it, you will also
have to run webpack in watch mode. You can use the
webpack-webext-plugin to simplify the workflow.
Files generated by webpack and friends are compiled files. You have to separately upload the source you generated your extension from to AMO for review of a listed extension. This will mean that your extension has to be reviewed by an admin reviewer, which will result in a longer wait time in queue.
To make the review easier, you can exclude third-party libraries from your output and directly ship the original distribution files for the libraries. This allows AMO to automatically recognize libraries and mark them as safe. This can be achieved with externals in the configuration for webpack.
credits: http://www.mattduck.com/a-super-dumb-web-highlighter.html