Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto eol=lf
+*.ai binary

.github/funding.yml

@@ -0,0 +1,2 @@
+github: fregante
+custom: https://paypal.me/bytemode

.github/workflows/release.yml

@@ -0,0 +1,81 @@
+env:
+  DIRECTORY: distribution
+
+# FILE GENERATED WITH: npx ghat fregante/ghatemplates/webext
+# SOURCE: https://github.com/fregante/ghatemplates
+# OPTIONS: {"exclude":["on.schedule"]}
+
+name: Release
+on:
+  workflow_dispatch: null
+jobs:
+  Version:
+    outputs:
+      created: ${{ steps.daily-version.outputs.created }}
+      version: ${{ steps.daily-version.outputs.version }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 20
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: install
+        run: npm ci || npm install
+      - run: npm test
+      - uses: fregante/daily-version-action@v2
+        name: Create tag if necessary
+        id: daily-version
+      - if: steps.daily-version.outputs.created
+        name: Create release
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: >
+            await github.request(`POST /repos/${{ github.repository
+            }}/releases`, {
+              tag_name: "${{ steps.daily-version.outputs.version }}",
+              generate_release_notes: true
+            });
+  Submit:
+    needs: Version
+    if: github.event_name == 'workflow_dispatch' || needs.Version.outputs.created
+    strategy:
+      fail-fast: false
+      matrix:
+        command:
+          - firefox
+          - chrome
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: install
+        run: npm ci || npm install
+      - run: npm run build --if-present
+      - name: Update extension’s meta
+        run: >-
+          npx dot-json@1 $DIRECTORY/manifest.json version ${{
+          needs.Version.outputs.version }}
+      - name: Submit
+        run: |
+          case ${{ matrix.command }} in
+            chrome)
+              cd $DIRECTORY && npx chrome-webstore-upload-cli@2 upload --auto-publish
+              ;;
+            firefox)
+              cd $DIRECTORY && npx web-ext-submit@7
+              ;;
+          esac
+        env:
+          EXTENSION_ID: ${{ secrets.EXTENSION_ID }}
+          CLIENT_ID: ${{ secrets.CLIENT_ID }}
+          CLIENT_SECRET: ${{ secrets.CLIENT_SECRET }}
+          REFRESH_TOKEN: ${{ secrets.REFRESH_TOKEN }}
+          WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
+          WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}

.github/workflows/template-cleanup.yml

@@ -0,0 +1,26 @@
+# This is a GitHub Actions workflow for cleaning up resources in the original template. When users create
+# a new repository from the template, the workflow deletes and edits files and push a commit.
+#
+# There is no straightforward way to exclude files when a template is used, so this is a workaround for it.
+# https://github.community/t/can-you-ignore-files-folders-when-making-a-repo-from-a-template/3279
+
+name: Template cleanup
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    if: github.event.repository.name != 'browser-extension-template'
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cleanup
+        run: |
+          rm -f \
+            .github/funding.yml \
+            .github/workflows/template-cleanup.yml
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Template cleanup

.github/workflows/test.yml

@@ -0,0 +1,18 @@
+name: Test
+
+on:
+  - pull_request
+  - push
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npx lockfile-lint --path package-lock.json --validate-https
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install
+      - run: npm test

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+distribution
+.parcel-cache

.parcelrc

@@ -0,0 +1,3 @@
+{
+	"extends": "@parcel/config-webextension"
+}

.terserrc

@@ -0,0 +1,7 @@
+{
+	"mangle": false,
+	"output": {
+		"beautify": true,
+		"indent_level": 2
+	}
+}

package.json

@@ -0,0 +1,49 @@
+{
+	"private": true,
+	"scripts": {
+		"build": "parcel build source/manifest.json --no-content-hash --no-source-maps --dist-dir distribution --no-cache --detailed-report 0",
+		"lint": "run-p lint:*",
+		"lint-fix": "run-p 'lint:* -- --fix'",
+		"lint:css": "stylelint source/**/*.css",
+		"lint:js": "xo",
+		"test": "run-p lint:* build",
+		"watch": "parcel watch source/manifest.json --dist-dir distribution --no-cache --no-hmr"
+	},
+	"browserslist": [
+		"last 1 Chrome version",
+		"last 1 Firefox version"
+	],
+	"xo": {
+		"envs": [
+			"browser",
+			"webextensions"
+		]
+	},
+	"stylelint": {
+		"extends": "stylelint-config-xo"
+	},
+	"dependencies": {
+		"webext-base-css": "^1.4.1",
+		"webext-options-sync": "^3.1.0"
+	},
+	"devDependencies": {
+		"@parcel/config-webextension": "^2.6.2",
+		"npm-run-all": "^4.1.5",
+		"parcel": "^2.6.2",
+		"stylelint": "^14.9.1",
+		"stylelint-config-xo": "^0.21.0",
+		"xo": "^0.50.0"
+	},
+	"webExt": {
+		"sourceDir": "distribution",
+		"run": {
+			"startUrl": [
+				"https://github.com/fregante/browser-extension-template"
+			]
+		}
+	},
+ 	"@parcel/bundler-default-bug": "https://github.com/parcel-bundler/parcel/issues/8071",
+ 	"@parcel/bundler-default": {
+ 		"minBundles": 10000000
+ 	}
+}

privacy-policy.md

@@ -0,0 +1,7 @@
+# Privacy Policy for browser-extension-template
+
+No data or personal information is collected by browser-extension-template.
+
+##### Contact
+
+If you have any questions or suggestions regarding this privacy policy, do not hesitate to [contact us](https://github.com/fregante/browser-extension-template/issues/new).

readme.md

@@ -0,0 +1,117 @@
+# browser-extension-template
+
+[link-rgh]: https://github.com/sindresorhus/refined-github
+[link-ngh]: https://github.com/sindresorhus/notifier-for-github
+[link-hfog]: https://github.com/sindresorhus/hide-files-on-github
+[link-tsconfig]: https://github.com/sindresorhus/tsconfig
+[link-options-sync]: https://github.com/fregante/webext-options-sync
+[link-cws-keys]: https://github.com/fregante/chrome-webstore-upload/blob/main/How%20to%20generate%20Google%20API%20keys.md
+[link-amo-keys]: https://addons.mozilla.org/en-US/developers/addon/api/key
+
+> Cross-browser extension boilerplate - barebones template with Parcel 2, options handler and auto-publishing.
+
+Screenshot of extension options:
+
+![Sample extension options output](media/previewer.png)
+
+## Features
+
+- Uses Manifest v3 ([not yet compatible with Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1578284))
+- Use npm dependencies thanks to Parcel 2.
+- [Auto-syncing options](#auto-syncing-options).
+- [Auto-publishing](#publishing) with auto-versioning and support for manual releases.
+
+## Getting started
+
+### 1️⃣ Create your own copy
+
+1. Click [<kbd>Use this template</kbd>](https://github.com/fregante/browser-extension-template/generate) to make a copy of your own. 😉
+
+Note: When you create a repository from the template, the [Template Cleanup](.github/workflows/template-cleanup.yml) workflow will be triggered to delete and edit template-specific resources. Wait a moment until the workflow finishes (you will see a commit pushed with 'Template cleanup' message).
+
+### 🛠 Build locally
+
+1. Checkout the copied repository to your local machine eg. with `git clone https://github.com/my-username/my-awesome-extension/`
+1. Run `npm install` to install all required dependencies
+1. Run `npm run build`
+
+The build step will create the `distribution` folder, this folder will contain the generated extension.
+
+### 🏃 Run the extension
+
+Using [web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) is recommended for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).
+
+1. Run `npm run watch` to watch for file changes and build continuously
+1. Run `npm install --global web-ext` (only only for the first time)
+1. In another terminal, run `web-ext run -t chromium`
+1. Check that the extension is loaded by opening the extension options ([in Firefox](media/extension_options_firefox.png) or [in Chrome](media/extension_options_chrome.png)).
+
+#### Manually
+
+You can also [load the extension manually in Chrome](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#google-chrome-opera-vivaldi) or [Firefox](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#mozilla-firefox).
+
+### ✏️ Make the first change
+
+1. For example, edit source\manifest.json to `"name": "My Awesome Extension",`
+1. Go back to your browser, reload and see the change take effect
+
+Note: Firefox will automatically reload content scripts when the extension is updated, Chrome requires you to reload the page to reload the content scripts.
+
+### 📕 Read the documentation
+
+Here are some websites you should refer to:
+
+- [Parcel’s Web Extension transformer documentation](https://parceljs.org/recipes/web-extension/)
+- [Chrome extensions’ API list](https://developer.chrome.com/docs/extensions/reference/)
+- A lot more links in my [Awesome WebExtensions](https://github.com/fregante/Awesome-WebExtensions) list
+
+## Configuration
+
+The extension doesn't target any specific ECMAScript environment or provide any transpiling by default. The extensions output will be the same ECMAScript you write. This allows us to always target the latest browser version, which is a good practice you should be following.
+
+### Parcel 2
+
+Being based on Parcel 2 and its [WebExtension transformer](https://parceljs.org/recipes/web-extension/), you get all the good parts:
+
+- Browserlist-based code transpiling (which defaults to just the latest Chrome and Firefox versions)
+- Automatically picks up any new file specified in `manifest.json`
+
+### Auto-syncing options
+
+Options are managed by [fregante/webext-options-sync][link-options-sync], which auto-saves and auto-restores the options form, applies defaults and runs migrations.
+
+### Publishing
+
+It's possible to automatically publish to both the Chrome Web Store and Mozilla Addons at once by adding these secrets on GitHub Actions:
+
+1. `CLIENT_ID`, `CLIENT_SECRET`, and `REFRESH_TOKEN` from [Google APIs][link-cws-keys].
+2. `WEB_EXT_API_KEY`, and `WEB_EXT_API_SECRET` from [AMO][link-amo-keys].
+
+Also include `EXTENSION_ID` in the secrets ([how to find it](https://stackoverflow.com/a/8946415/288906)) and add Mozilla’s [`gecko.id`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) to `manifest.json`.
+
+The GitHub Actions workflow will:
+
+1. Build the extension
+2. Create a version number based on the current UTC date time, like [`19.6.16`](https://github.com/fregante/daily-version-action) and sets it in the manifest.json
+3. Deploy it to both stores
+
+#### Auto-publishing
+
+Thanks to the included [GitHub Action Workflows](.github/workflows), if you set up those secrets in the repo's Settings, the deployment will automatically happen:
+
+- on a schedule, by default [every week](.github/workflows/release.yml) (but only if there are any new commits in the last tag)
+- manually, by clicking ["Run workflow"](https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/) in the Actions tab.
+
+## Credits
+
+Extension icon made by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0).
+
+## Extensions created using this template
+
+- [notlmn/copy-as-markdown](https://github.com/notlmn/copy-as-markdown) - Browser extension to copy hyperlinks, images, and selected text as Markdown.
+
+## License
+
+This browser extension template is released under [CC0](#license) and mentioned below. There is no `license` file included in here, but when you clone this template, you should include your own license file for the specific license you choose to use.
+
+[![CC0](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)

source/background.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-unassigned-import
+import './options-storage.js';

source/content.css

@@ -0,0 +1,8 @@
+#text-notice {
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	padding: 10px;
+	background: #fff;
+	z-index: 999999;
+}

source/content.js

@@ -0,0 +1,16 @@
+import optionsStorage from './options-storage.js';
+
+console.log('💈 Content script loaded for', chrome.runtime.getManifest().name);
+async function init() {
+	const options = await optionsStorage.getAll();
+	const color = 'rgb(' + options.colorRed + ', ' + options.colorGreen + ',' + options.colorBlue + ')';
+	const text = options.text;
+	const notice = document.createElement('div');
+	notice.innerHTML = text;
+	document.body.prepend(notice);
+	notice.id = 'text-notice';
+	notice.style.border = '2px solid ' + color;
+	notice.style.color = color;
+}
+
+init();

source/manifest.json

@@ -0,0 +1,39 @@
+{
+	"name": "Awesome Extension",
+	"version": "0.0.0",
+	"description": "An awesome new browser extension",
+	"homepage_url": "https://github.com/fregante/browser-extension-template",
+	"manifest_version": 3,
+	"minimum_chrome_version": "100",
+	"browser_specific_settings": {
+		"gecko": {
+			"id": "awesome-extension@notlmn.github.io",
+			"strict_min_version": "100.0"
+		}
+	},
+	"icons": {
+		"128": "icon.png"
+	},
+	"permissions": [
+		"storage"
+	],
+	"host_permissions": [
+		"https://github.com/*"
+	],
+	"content_scripts": [
+		{
+			"matches": [ "https://github.com/fregante/browser-extension-template/*" ],
+			"js": [ "content.js" ],
+			"css": [ "content.css" ],
+			"run_at": "document_end"
+		}
+	],
+	"options_ui": {
+		"browser_style": true,
+		"page": "options.html"
+	},
+	"background": {
+		"service_worker": "background.js",
+		"type": "module"
+	}
+}

source/options-storage.js

@@ -0,0 +1,14 @@
+import OptionsSync from 'webext-options-sync';
+
+export default new OptionsSync({
+	defaults: {
+		colorRed: 244,
+		colorGreen: 67,
+		colorBlue: 54,
+		text: 'Set a text!',
+	},
+	migrations: [
+		OptionsSync.migrations.removeUnused,
+	],
+	logging: true,
+});

source/options.css

@@ -0,0 +1,65 @@
+html {
+	min-width: 550px;
+	overflow-x: hidden; /* Required to hide horizontal scroll on Firefox */
+}
+
+/* For use with screen readers */
+.sr-only {
+	display: none;
+}
+
+/* Hide spinbox for number inputs */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+input[type='number'] {
+	-moz-appearance: textfield;
+}
+
+input[type='number'],
+input[type='text'] {
+	padding: 0.25rem 0.375rem;
+}
+
+.color-picker {
+	display: flex;
+}
+
+.color-inputs {
+	flex: 1;
+}
+
+.color-input {
+	display: flex;
+	padding: 0.25rem;
+	align-items: center;
+}
+
+.color-input input[type='range'] {
+	flex: 1;
+	margin: 0 0.5rem;
+}
+
+.color-input input[type='number'] {
+	width: calc(3ch + 1rem);
+}
+
+.color-output {
+	width: 86px;
+	height: 86px;
+	margin: 0.5rem;
+}
+
+/* Firefox only */
+.only-firefox {
+	display: none;
+}
+
+@-moz-document url-prefix('') {
+	.only-firefox {
+		display: block;
+	}
+}

source/options.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Options</title>
+
+<form id="options-form" class="detail-view-container">
+	<h3>Color Picker</h3>
+	<div class="color-picker">
+		<div class="color-inputs">
+			<label class="color-input">
+				<span>R</span>
+				<input type="range" min="0" max="255" name="colorRed">
+				<input type="number" name="colorRed" min="0" max="255">
+			</label>
+			<label class="color-input">
+				<span>G</span>
+				<input type="range" min="0" max="255" name="colorGreen">
+				<input type="number" name="colorGreen" min="0" max="255">
+			</label>
+			<label class="color-input">
+				<span>B</span>
+				<input type="range" min="0" max="255" name="colorBlue">
+				<input type="number" name="colorBlue" min="0" max="255">
+			</label>
+		</div>
+		<div class="color-output"></div>
+	</div>
+	<h3>Notice Content</h3>
+	<div class="text-inputs">
+		<label class="text-input">
+			<span>Text</span>
+			<input type="text" name="text">
+		</label>
+	</div>
+</form>
+
+<script src="options.js" type="module"></script>

source/options.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-unassigned-import
+import 'webext-base-css';
+import './options.css';
+
+import optionsStorage from './options-storage.js';
+
+const rangeInputs = [...document.querySelectorAll('input[type="range"][name^="color"]')];
+const numberInputs = [...document.querySelectorAll('input[type="number"][name^="color"]')];
+const output = document.querySelector('.color-output');
+
+function updateOutputColor() {
+	output.style.backgroundColor = `rgb(${rangeInputs[0].value}, ${rangeInputs[1].value}, ${rangeInputs[2].value})`;
+}
+
+function updateInputField(event) {
+	numberInputs[rangeInputs.indexOf(event.currentTarget)].value = event.currentTarget.value;
+}
+
+for (const input of rangeInputs) {
+	input.addEventListener('input', updateOutputColor);
+	input.addEventListener('input', updateInputField);
+}
+
+async function init() {
+	await optionsStorage.syncForm('#options-form');
+	updateOutputColor();
+}
+
+init();