Skip to content

Commit 715830d

Browse files
committed
Pretty much works with v3 now
1 parent 2746a74 commit 715830d

File tree

7 files changed

+85
-16
lines changed

7 files changed

+85
-16
lines changed

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ Before contributing to JSONView, make sure to read the [Contributing Guidelines]
2929
- Check out jsonview.
3030
- Run `pnpm i` inside the jsonview repository.
3131
- Run `pnpm start` to build the extension.
32-
- 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.
33-
- In Chrome, go to `chrome://extensions/` in the address bar, select "Load Unpacked", and choose the `jsonview/build-chrome` folder.
32+
- 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/manifest.json` file.
33+
- In Chrome, Edge, etc., go to `edge://extensions/`, in the address bar, enable "Developer mode", select "Load Unpacked", and choose the `jsonview/build-chrome` folder.
3434

3535
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/`.
3636

@@ -45,7 +45,7 @@ JSONView is open source software under the MIT license.
4545
## Publishing
4646

4747
```
48-
npm start
48+
pnpm start
4949
```
5050

51-
`jsonview.zip` can then be manually uploaded to the extension sites.
51+
`jsonview-chrome.zip` and `jsonview-firefox.zip` can then be manually uploaded to the extension sites.

build.sh

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ node --test
1010
rm -rf build-chrome
1111
mkdir -p build-chrome
1212

13-
rollup ts-out/background.js --format iife --name 'background' --file build-chrome/background.js
14-
rollup ts-out/content.js --format iife --name 'background' --file build-chrome/content.js
13+
rollup ts-out/background-chrome.js --format es --name 'background' --file build-chrome/background.js
14+
rollup ts-out/content.js --format es --name 'content' --file build-chrome/content.js
1515
cp src/viewer.css build-chrome/viewer.css
1616
cp src/manifest.chrome.json build-chrome/manifest.json
1717
cp license.txt build-chrome/license.txt
@@ -28,8 +28,8 @@ popd
2828
rm -rf build-firefox
2929
mkdir -p build-firefox
3030

31-
rollup ts-out/background.js --format iife --name 'background' --file build-firefox/background.js
32-
rollup ts-out/content.js --format iife --name 'background' --file build-firefox/content.js
31+
rollup ts-out/background-firefox.js --format es --name 'background' --file build-firefox/background.js
32+
rollup ts-out/content.js --format es --name 'content' --file build-firefox/content.js
3333
cp src/viewer.css build-firefox/viewer.css
3434
cp src/manifest.firefox.json build-firefox/manifest.json
3535
cp license.txt build-firefox/license.txt

src/background.ts renamed to src/background-chrome.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,17 @@ function detectJSON(event: chrome.webRequest.WebResponseHeadersDetails) {
2323
isJSONContentType(header.value)
2424
) {
2525
addJsonUrl(event.url);
26-
if (typeof browser !== "undefined" && "filterResponseData" in browser.webRequest) {
27-
header.value = "text/plain";
28-
}
2926
}
3027
}
3128

3229
return { responseHeaders: event.responseHeaders };
3330
}
3431

3532
// Listen for onHeaderReceived for the target page.
36-
// Set "blocking" and "responseHeaders".
3733
chrome.webRequest.onHeadersReceived.addListener(
3834
detectJSON,
3935
{ urls: ["<all_urls>"], types: ["main_frame"] },
40-
["blocking", "responseHeaders"]
36+
["responseHeaders"]
4137
);
4238

4339
// Listen for a message from the content script to decide whether to operate on

src/background-firefox.ts

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/**
2+
* This is the background script that runs independent of any document. It
3+
* listens to main frame requests and kicks in if the headers indicate JSON. If
4+
* we have the filterResponseData API available, we will use that to change the
5+
* page to what Chrome displays for JSON (this is only used in Firefox). Then a
6+
* content script reformats the page.
7+
*/
8+
9+
import { isJSONContentType } from "./content-type";
10+
11+
function isRedirect(status: number) {
12+
return status >= 300 && status < 400;
13+
}
14+
15+
function detectJSON(event: chrome.webRequest.WebResponseHeadersDetails) {
16+
if (!event.responseHeaders || isRedirect(event.statusCode)) {
17+
return;
18+
}
19+
for (const header of event.responseHeaders) {
20+
if (
21+
header.name.toLowerCase() === "content-type" &&
22+
header.value &&
23+
isJSONContentType(header.value)
24+
) {
25+
addJsonUrl(event.url);
26+
if (typeof browser !== "undefined" && "filterResponseData" in browser.webRequest) {
27+
// We need to change the content type to text/plain to prevent Firefox
28+
// from using its built-in JSON viewer.
29+
header.value = "text/plain";
30+
}
31+
}
32+
}
33+
34+
return { responseHeaders: event.responseHeaders };
35+
}
36+
37+
// Listen for onHeaderReceived for the target page.
38+
chrome.webRequest.onHeadersReceived.addListener(
39+
detectJSON,
40+
// Firefox cannot fire onHeadersReceived for local files.
41+
{ urls: ["<all_urls>"], types: ["main_frame"] },
42+
["blocking", "responseHeaders"]
43+
);
44+
45+
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
46+
if (message !== "jsonview-is-json") {
47+
return;
48+
}
49+
50+
if (!sender.url) {
51+
sendResponse(false);
52+
return;
53+
}
54+
55+
if (sender.url.startsWith("file://") && sender.url.endsWith(".json")) {
56+
sendResponse(true);
57+
return;
58+
}
59+
60+
hasJsonUrl(sender.url).then(sendResponse);
61+
return true; // this means "we're going to sendResponse asynchronously"
62+
});
63+
64+
async function addJsonUrl(url: string) {
65+
await chrome.storage.session.set({ [url]: true });
66+
}
67+
68+
async function hasJsonUrl(url: string) {
69+
const stored = await chrome.storage.session.get(url);
70+
const present = url in stored;
71+
await chrome.storage.session.remove(url);
72+
return present;
73+
}

src/content.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ chrome.runtime.sendMessage("jsonview-is-json", (response: boolean) => {
1919
content = jsonElems[0].textContent;
2020
} else {
2121
// Sometimes there's no pre? I'm not sure why this would happen
22-
content = document.body.textContent;
22+
content = (document.body.firstChild ?? document.body).textContent;
2323
}
2424
let outputDoc = "";
2525
let jsonObj: any = null;

src/manifest.chrome.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"web_accessible_resources": [
2929
{
3030
"resources": ["viewer.css"],
31-
"matches": ["*://*/*"]
31+
"matches": ["<all_urls>"]
3232
}
3333
],
3434
"default_locale": "en"

src/manifest.firefox.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"web_accessible_resources": [
2929
{
3030
"resources": ["viewer.css"],
31-
"matches": ["*://*/*"]
31+
"matches": ["<all_urls>"]
3232
}
3333
],
3434
"default_locale": "en"

0 commit comments

Comments
 (0)