Start transitioning to manifest v3

Author: bhollis

.gitignore

@@ -3,5 +3,6 @@
 .tern-port
 /ts-out
 /build
+/build-*
 /node_modules
 

.vscode/settings.json

@@ -12,12 +12,12 @@
   "jest.jestCommandLine": "yarn test",
   "[javascript]": {
     "editor.codeActionsOnSave": {
-      "source.organizeImports": false
+      "source.organizeImports": "never"
     }
   },
   "[typescript]": {
     "editor.codeActionsOnSave": {
-      "source.organizeImports": false
+      "source.organizeImports": "never"
     }
   },
   "[javascript][typescript]": {

README.md

@@ -1,53 +1,48 @@
-JSONView
-========
+# JSONView
 
 [JSONView](http://jsonview.com) is a Web extension compatible with Firefox and Google Chrome that helps you view JSON documents in the browser.
 
-* [Install for Firefox](https://addons.mozilla.org/en-US/firefox/addon/jsonview/)
-* [Install for Chrome](https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd)
-* [Install for Edge](https://microsoftedge.microsoft.com/addons/detail/jsonview/kmpfgkgaimakokfhgdahhiaaiidiphco)
+- [Install for Firefox](https://addons.mozilla.org/en-US/firefox/addon/jsonview/)
+- [Install for Chrome](https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd)
+- [Install for Edge](https://microsoftedge.microsoft.com/addons/detail/jsonview/kmpfgkgaimakokfhgdahhiaaiidiphco)
 
 Normally, when encountering a [JSON](http://json.org) document (content type `application/json`), Firefox simply prompts you to download the view. With the JSONView extension, JSON documents are shown in the browser similar to how XML documents are shown. The document is formatted, highlighted, and arrays and objects can be collapsed. Even if the JSON document contains errors, JSONView will still show the raw text.
 
 Once you've got JSONView installed, check out [this example JSON file](http://jsonview.com/example.json) to see the extension in action!
 
 If you'd like to contribute to JSONView but don't want to code, consider contributing a translation. Copy the existing localization files from `src/_locale` and fill them in for your own language, then send a pull request. You can do it all from the GitHub interface. There are not many strings to translate!
 
-Keyboard Shortcuts
-----------------
+## Keyboard Shortcuts
 
-* Left Arrow - Collapses the json on key up
-* Right Arrow - Expands the json on key up
+- Left Arrow - Collapses the json on key up
+- Right Arrow - Expands the json on key up
 
-Reporting Issues
-----------------
+## Reporting Issues
 
 Use the GitHub [Issue tracker for JSONView](https://github.com/bhollis/jsonview/issues) to file issues. Pull requests are especially welcome.
 
-Developing JSONView
--------------------
+## Developing JSONView
 
 Before contributing to JSONView, make sure to read the [Contributing Guidelines](CONTRIBUTING.md). I appreciate contributions people make to JSONView, but the goal of the extension is to be simple and straightforward, so I frequently reject contributions that add complexity or unnecessary features. Please consider filing an issue before doing any work, so you don't waste time on something I won't accept.
 
-* Install [NodeJS](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/docs/install).
-* Check out jsonview.
-* Run `yarn` inside the jsonview repository.
-* Run `yarn start` to build the extension.
-* In Firefox, go to `about:debugging#addons` in the address bar, check "Enable add-on debugging", select "Load Temporary Add-on", and choose the `jsonview/build` folder.
-* In Chrome, go to `chrome://extensions/` in the address bar, select "Load Unpacked", and choose the `jsonview/build` folder.
+- Install [NodeJS](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/docs/install).
+- Check out jsonview.
+- Run `yarn` inside the jsonview repository.
+- Run `yarn start` to build the extension.
+- In Firefox, go to `about:debugging#addons` in the address bar, check "Enable add-on debugging", select "Load Temporary Add-on", and choose the `jsonview/build-firefox` folder.
+- In Chrome, go to `chrome://extensions/` in the address bar, select "Load Unpacked", and choose the `jsonview/build-chrome` folder.
 
 JSONView makes use of [TypeScript](https://www.typescriptlang.org/). I recommend [VSCode](https://code.visualstudio.com/) for editing the code - it will automatically prompt to install the correct extensions, and will highlight errors. All of the code that makes up the extension itself are in `src/`.
 
-Common Issues
--------------
-* **JSONView isn't displaying my file as JSON**: You are probably not serving
+## Common Issues
+
+- **JSONView isn't displaying my file as JSON**: You are probably not serving
   the JSON with the "application/json" MIME type.
-* **Opening a local .json file uses the Firefox default JSON viewer**: You need to disable the built-in JSON viewer to use JSONView. Go to "about:config" and set "devtools.jsonview.enabled" to "false".
+- **Opening a local .json file uses the Firefox default JSON viewer**: You need to disable the built-in JSON viewer to use JSONView. Go to "about:config" and set "devtools.jsonview.enabled" to "false".
 
 JSONView is open source software under the MIT license.
 
-Publishing
-----------
+## Publishing
 
 ```
 npm start

build.sh

@@ -6,19 +6,39 @@ tsc
 
 node --test
 
-rm -rf build
-mkdir -p build
-
-rollup ts-out/background.js --format iife --name 'background' --file build/background.js
-rollup ts-out/content.js --format iife --name 'background' --file build/content.js
-rollup ts-out/viewer.js --format iife --name 'background' --file build/viewer.js
-cp src/viewer.css build/viewer.css
-cp src/manifest.json build/manifest.json
-cp license.txt build/license.txt
-cp -r src/_locales build
-cp src/icon*.png build
-
-rm -f jsonview.zip
-pushd build
-zip -r ../jsonview.zip *
+# Chrome
+rm -rf build-chrome
+mkdir -p build-chrome
+
+rollup ts-out/background.js --format iife --name 'background' --file build-chrome/background.js
+rollup ts-out/content.js --format iife --name 'background' --file build-chrome/content.js
+rollup ts-out/viewer.js --format iife --name 'background' --file build-chrome/viewer.js
+cp src/viewer.css build-chrome/viewer.css
+cp src/manifest.chrome.json build-chrome/manifest.json
+cp license.txt build-chrome/license.txt
+cp -r src/_locales build-chrome
+cp src/icon*.png build-chrome
+
+rm -f jsonview-chrome.zip
+pushd build-chrome
+zip -r ../jsonview-chrome.zip *
 popd
+
+
+# Firefox
+rm -rf build-firefox
+mkdir -p build-firefox
+
+rollup ts-out/background.js --format iife --name 'background' --file build-firefox/background.js
+rollup ts-out/content.js --format iife --name 'background' --file build-firefox/content.js
+rollup ts-out/viewer.js --format iife --name 'background' --file build-firefox/viewer.js
+cp src/viewer.css build-firefox/viewer.css
+cp src/manifest.firefox.json build-firefox/manifest.json
+cp license.txt build-firefox/license.txt
+cp -r src/_locales build-firefox
+cp src/icon*.png build-firefox
+
+rm -f jsonview-firefox.zip
+pushd build-firefox
+zip -r ../jsonview-firefox.zip *
+popd

buildWindows.ps1

@@ -2,19 +2,37 @@
 
 tsc
 
-rm -r -fo ./build
-mkdir -p build
-
-yarn rollup ts-out/background.js --format iife --name 'background' --file build/background.js
-yarn rollup ts-out/content.js --format iife --name 'background' --file build/content.js
-yarn rollup ts-out/viewer.js --format iife --name 'background' --file build/viewer.js
-cp src/viewer.css build/viewer.css
-cp src/manifest.json build/manifest.json
-cp license.txt build/license.txt
-cp -r src/_locales build
-cp src/icon*.png build
+rm -r -fo ./build-chrome
+mkdir -p build-chrome
+
+yarn rollup ts-out/background.js --format iife --name 'background' --file build-chrome/background.js
+yarn rollup ts-out/content.js --format iife --name 'background' --file build-chrome/content.js
+yarn rollup ts-out/viewer.js --format iife --name 'background' --file build-chrome/viewer.js
+cp src/viewer.css build-chrome/viewer.css
+cp src/manifest.json build-chrome/manifest.json
+cp license.txt build-chrome/license.txt
+cp -r src/_locales build-chrome
+cp src/icon*.png build-chrome
+
+rm -fo ./jsonview.zip
+pushd build-chrome
+Compress-Archive -Path ./* -DestinationPath ../jsonview.zip
+popd
+
+
+rm -r -fo ./build-firefox
+mkdir -p build-firefox
+
+yarn rollup ts-out/background.js --format iife --name 'background' --file build-firefox/background.js
+yarn rollup ts-out/content.js --format iife --name 'background' --file build-firefox/content.js
+yarn rollup ts-out/viewer.js --format iife --name 'background' --file build-firefox/viewer.js
+cp src/viewer.css build-firefox/viewer.css
+cp src/manifest.json build-firefox/manifest.json
+cp license.txt build-firefox/license.txt
+cp -r src/_locales build-firefox
+cp src/icon*.png build-firefox
 
 rm -fo ./jsonview.zip
-pushd build
+pushd build-firefox
 Compress-Archive -Path ./* -DestinationPath ../jsonview.zip
 popd

src/background.ts

@@ -8,9 +8,6 @@
 
 import { isJSONContentType } from "./content-type";
 
-// Keep track globally of URLs that contain JSON content.
-const jsonUrls = new Set<string>();
-
 function isRedirect(status: number) {
   return status >= 300 && status < 400;
 }
@@ -25,7 +22,7 @@ function detectJSON(event: chrome.webRequest.WebResponseHeadersDetails) {
       header.value &&
       isJSONContentType(header.value)
     ) {
-      jsonUrls.add(event.url);
+      addJsonUrl(event.url);
       if (typeof browser !== "undefined" && "filterResponseData" in browser.webRequest) {
         header.value = "text/plain";
       }
@@ -47,12 +44,26 @@ chrome.webRequest.onHeadersReceived.addListener(
 // the page. Calls sendResponse with a boolean that's true if the content script
 // should run, and false otherwise.
 chrome.runtime.onMessage.addListener((_message, sender, sendResponse) => {
-  if (sender.url?.startsWith("file://") && sender.url.endsWith(".json")) {
-    sendResponse(true);
+  if (!sender.url) {
+    sendResponse(false);
     return;
   }
-  sendResponse(sender.url && jsonUrls.has(sender.url));
-  if (sender.url) {
-    jsonUrls.delete(sender.url);
+
+  if (sender.url.startsWith("file://") && sender.url.endsWith(".json")) {
+    sendResponse(true);
+    return;
   }
+  const isKnownJsonUrl = hasJsonUrl(sender.url);
+  sendResponse(isKnownJsonUrl);
 });
+
+async function addJsonUrl(url: string) {
+  await chrome.storage.session.set({ [url]: true });
+}
+
+async function hasJsonUrl(url: string) {
+  const stored = await chrome.storage.session.get(url);
+  const present = url in stored;
+  await chrome.storage.session.remove(url);
+  return present;
+}

src/manifest.json renamed to src/manifest.chrome.json

@@ -1,7 +1,7 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "JSONView",
-  "version": "2.6.1",
+  "version": "3.0.0",
   "description": "__MSG_extensionDescription__",
   "author": "Benjamin Hollis",
   "homepage_url": "https://jsonview.com/",
@@ -13,20 +13,22 @@
     "256": "icon256.png"
   },
   "background": {
-    "scripts": ["background.js"]
+    "service_worker": "background.js",
+    "type": "module"
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "js": ["content.js"]
     }
   ],
-  "permissions": ["<all_urls>", "webRequest", "webRequestBlocking"],
-  "applications": {
-    "gecko": {
-      "id": "jsonview@brh.numbera.com"
+  "permissions": ["webRequest"],
+  "host_permissions": ["<all_urls>"],
+  "web_accessible_resources": [
+    {
+      "resources": ["viewer.css", "viewer.js"],
+      "matches": ["*://*/*"]
     }
-  },
-  "web_accessible_resources": ["viewer.css", "viewer.js"],
+  ],
   "default_locale": "en"
 }

src/manifest.firefox.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 3,
+  "name": "JSONView",
+  "version": "3.0.0",
+  "description": "__MSG_extensionDescription__",
+  "author": "Benjamin Hollis",
+  "homepage_url": "https://jsonview.com/",
+  "icons": {
+    "32": "icon.png",
+    "48": "icon48.png",
+    "64": "icon64.png",
+    "128": "icon128.png",
+    "256": "icon256.png"
+  },
+  "background": {
+    "scripts": ["background-script.js"],
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"]
+    }
+  ],
+  "permissions": ["webRequest"],
+  "host_permissions": ["<all_urls>"],
+  "web_accessible_resources": [
+    {
+      "resources": ["viewer.css", "viewer.js"],
+      "matches": ["*://*/*"]
+    }
+  ],
+  "default_locale": "en"
+}

tsconfig.json

@@ -5,17 +5,15 @@
     "sourceMap": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
-    "module": "ESNext",
-    "target": "es6",
-    "moduleResolution": "node",
+    "module": "ES2020",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "forceConsistentCasingInFileNames": true,
     "allowJs": true,
     "checkJs": true,
     "typeRoots": ["node_modules/@types", "node_modules/web-ext-types"]
   },
-  "include": [
-    "./src/*.ts"
-  ]
+  "include": ["./src/*.ts"]
 }