├── .github
└── workflows
│ └── lint.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── assets
├── demo.js
├── screenshot-1.png
└── screenshot.png
├── chrome
├── icon.png
└── manifest.json
├── gulpfile.mjs
├── package.json
├── pnpm-lock.yaml
├── src
├── content-script.ts
├── index.css
├── options.tsx
├── render.tsx
└── utils.ts
├── tsconfig.json
├── webpack.config.js
└── webpack.config.production.js
/.github/workflows/lint.yml:
--------------------------------------------------------------------------------
1 | name: lint
2 | on:
3 | push:
4 | pull_request:
5 | jobs:
6 | build:
7 | runs-on: ubuntu-latest
8 | steps:
9 | - uses: actions/checkout@v2
10 | - uses: pnpm/action-setup@v2.2.1
11 | - run: pnpm install
12 | - run: pnpm lint
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | dist/
61 | vendor/
62 | *.zip
63 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": false,
3 | "singleQuote": true
4 | }
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Rongjian Zhang
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JSON Viewer
2 |
3 | Port of [Firefox's JSON Viewer](https://developer.mozilla.org/en-US/docs/Tools/JSON_viewer) for Chrome and Opera
4 |
5 |
6 |
7 | ## Installation
8 |
9 | Install it from [Chrome Web Store](https://chrome.google.com/webstore/detail/json-viewer/efknglbfhoddmmfabeihlemgekhhnabb)
10 |
11 | Opera users could use this extension: [Install Chrome Extensions](https://addons.opera.com/en/extensions/details/download-chrome-extension-9/)
12 |
13 | ## Usage
14 |
15 | Try https://httpbin.org/headers after installation
16 |
17 | Open _Allow access to file URLs_ to make `file:///` work
18 |
19 | ## License
20 |
21 | MIT
22 |
--------------------------------------------------------------------------------
/assets/demo.js:
--------------------------------------------------------------------------------
1 | const http = require('http')
2 |
3 | http
4 | .createServer((req, res) => {
5 | res.setHeader('Content-Type', 'application/json')
6 | res.end(`{
7 | "id": 119000398,
8 | "name": "json-viewer",
9 | "full_name": "pd4d10/json-viewer",
10 | "owner": {
11 | "login": "pd4d10",
12 | "id": 9524411,
13 | "avatar_url": "https://avatars0.githubusercontent.com/u/9524411?v=4",
14 | "gravatar_id": "",
15 | "url": "https://api.github.com/users/pd4d10",
16 | "html_url": "https://github.com/pd4d10",
17 | "followers_url": "https://api.github.com/users/pd4d10/followers",
18 | "following_url": "https://api.github.com/users/pd4d10/following{/other_user}",
19 | "gists_url": "https://api.github.com/users/pd4d10/gists{/gist_id}",
20 | "starred_url": "https://api.github.com/users/pd4d10/starred{/owner}{/repo}",
21 | "subscriptions_url": "https://api.github.com/users/pd4d10/subscriptions",
22 | "organizations_url": "https://api.github.com/users/pd4d10/orgs",
23 | "repos_url": "https://api.github.com/users/pd4d10/repos",
24 | "events_url": "https://api.github.com/users/pd4d10/events{/privacy}",
25 | "received_events_url": "https://api.github.com/users/pd4d10/received_events",
26 | "type": "User",
27 | "site_admin": false
28 | },
29 | "private": false,
30 | "html_url": "https://github.com/pd4d10/json-viewer",
31 | "description": "Port of Firefox's JSON Viewer for Chrome and Opera",
32 | "fork": false,
33 | "url": "https://api.github.com/repos/pd4d10/json-viewer",
34 | "forks_url": "https://api.github.com/repos/pd4d10/json-viewer/forks",
35 | "keys_url": "https://api.github.com/repos/pd4d10/json-viewer/keys{/key_id}",
36 | "collaborators_url": "https://api.github.com/repos/pd4d10/json-viewer/collaborators{/collaborator}",
37 | "teams_url": "https://api.github.com/repos/pd4d10/json-viewer/teams",
38 | "hooks_url": "https://api.github.com/repos/pd4d10/json-viewer/hooks",
39 | "issue_events_url": "https://api.github.com/repos/pd4d10/json-viewer/issues/events{/number}",
40 | "events_url": "https://api.github.com/repos/pd4d10/json-viewer/events",
41 | "assignees_url": "https://api.github.com/repos/pd4d10/json-viewer/assignees{/user}",
42 | "branches_url": "https://api.github.com/repos/pd4d10/json-viewer/branches{/branch}",
43 | "tags_url": "https://api.github.com/repos/pd4d10/json-viewer/tags",
44 | "blobs_url": "https://api.github.com/repos/pd4d10/json-viewer/git/blobs{/sha}",
45 | "git_tags_url": "https://api.github.com/repos/pd4d10/json-viewer/git/tags{/sha}",
46 | "git_refs_url": "https://api.github.com/repos/pd4d10/json-viewer/git/refs{/sha}",
47 | "trees_url": "https://api.github.com/repos/pd4d10/json-viewer/git/trees{/sha}",
48 | "statuses_url": "https://api.github.com/repos/pd4d10/json-viewer/statuses/{sha}",
49 | "languages_url": "https://api.github.com/repos/pd4d10/json-viewer/languages",
50 | "stargazers_url": "https://api.github.com/repos/pd4d10/json-viewer/stargazers",
51 | "contributors_url": "https://api.github.com/repos/pd4d10/json-viewer/contributors",
52 | "subscribers_url": "https://api.github.com/repos/pd4d10/json-viewer/subscribers",
53 | "subscription_url": "https://api.github.com/repos/pd4d10/json-viewer/subscription",
54 | "commits_url": "https://api.github.com/repos/pd4d10/json-viewer/commits{/sha}",
55 | "git_commits_url": "https://api.github.com/repos/pd4d10/json-viewer/git/commits{/sha}",
56 | "comments_url": "https://api.github.com/repos/pd4d10/json-viewer/comments{/number}",
57 | "issue_comment_url": "https://api.github.com/repos/pd4d10/json-viewer/issues/comments{/number}",
58 | "contents_url": "https://api.github.com/repos/pd4d10/json-viewer/contents/{+path}",
59 | "compare_url": "https://api.github.com/repos/pd4d10/json-viewer/compare/{base}...{head}",
60 | "merges_url": "https://api.github.com/repos/pd4d10/json-viewer/merges",
61 | "archive_url": "https://api.github.com/repos/pd4d10/json-viewer/{archive_format}{/ref}",
62 | "downloads_url": "https://api.github.com/repos/pd4d10/json-viewer/downloads",
63 | "issues_url": "https://api.github.com/repos/pd4d10/json-viewer/issues{/number}",
64 | "pulls_url": "https://api.github.com/repos/pd4d10/json-viewer/pulls{/number}",
65 | "milestones_url": "https://api.github.com/repos/pd4d10/json-viewer/milestones{/number}",
66 | "notifications_url": "https://api.github.com/repos/pd4d10/json-viewer/notifications{?since,all,participating}",
67 | "labels_url": "https://api.github.com/repos/pd4d10/json-viewer/labels{/name}",
68 | "releases_url": "https://api.github.com/repos/pd4d10/json-viewer/releases{/id}",
69 | "deployments_url": "https://api.github.com/repos/pd4d10/json-viewer/deployments",
70 | "created_at": "2018-01-26T03:22:59Z",
71 | "updated_at": "2018-01-29T15:33:41Z",
72 | "pushed_at": "2018-01-29T15:47:36Z",
73 | "git_url": "git://github.com/pd4d10/json-viewer.git",
74 | "ssh_url": "git@github.com:pd4d10/json-viewer.git",
75 | "clone_url": "https://github.com/pd4d10/json-viewer.git",
76 | "svn_url": "https://github.com/pd4d10/json-viewer",
77 | "homepage": "",
78 | "size": 136,
79 | "stargazers_count": 0,
80 | "watchers_count": 0,
81 | "language": "JavaScript",
82 | "has_issues": true,
83 | "has_projects": true,
84 | "has_downloads": true,
85 | "has_wiki": true,
86 | "has_pages": false,
87 | "forks_count": 0,
88 | "mirror_url": null,
89 | "archived": false,
90 | "open_issues_count": 0,
91 | "license": {
92 | "key": "mit",
93 | "name": "MIT License",
94 | "spdx_id": "MIT",
95 | "url": "https://api.github.com/licenses/mit"
96 | },
97 | "forks": 0,
98 | "open_issues": 0,
99 | "watchers": 0,
100 | "default_branch": "master",
101 | "network_count": 0,
102 | "subscribers_count": 1
103 | }
104 |
105 | `)
106 | })
107 | .listen(8000, () => {
108 | console.log('http://localhost:8000')
109 | })
110 |
--------------------------------------------------------------------------------
/assets/screenshot-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pd4d10/json-viewer/7d2ac757eb756d85bbdf3770bc6376e1bb233d17/assets/screenshot-1.png
--------------------------------------------------------------------------------
/assets/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pd4d10/json-viewer/7d2ac757eb756d85bbdf3770bc6376e1bb233d17/assets/screenshot.png
--------------------------------------------------------------------------------
/chrome/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pd4d10/json-viewer/7d2ac757eb756d85bbdf3770bc6376e1bb233d17/chrome/icon.png
--------------------------------------------------------------------------------
/chrome/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 3,
3 | "name": "JSON Viewer",
4 | "version": "2.2.0",
5 | "description": "Port of Firefox's JSON Viewer",
6 | "offline_enabled": true,
7 | "homepage_url": "https://github.com/pd4d10/json-viewer",
8 | "content_scripts": [
9 | {
10 | "matches": [""],
11 | "js": ["dist/content-script.js"],
12 | "run_at": "document_end"
13 | }
14 | ],
15 | "icons": {
16 | "128": "icon.png"
17 | },
18 | "permissions": ["storage"]
19 | }
20 |
--------------------------------------------------------------------------------
/gulpfile.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import fs from 'fs-extra'
3 | import gulp from 'gulp'
4 | import download from 'gulp-download-stream'
5 | import unzip from 'gulp-unzip'
6 | import rename from 'gulp-rename'
7 | import gulpif from 'gulp-if'
8 | import replace from 'gulp-replace'
9 | import fetch from 'node-fetch'
10 | import * as cheerio from 'cheerio'
11 | import { deleteAsync } from 'del'
12 |
13 | const color = 'rgba(135, 135, 137, 0.9)'
14 |
15 | // https://hg.mozilla.org/mozilla-central/file/tip/devtools/client
16 | export const downloadGeckoZip = () => {
17 | return download({
18 | file: 'gecko.zip',
19 | url: 'https://hg.mozilla.org/mozilla-central/archive/tip.zip/devtools/client/',
20 | }).pipe(gulp.dest('.'))
21 | }
22 |
23 | export const downloadL10nList = async (done) => {
24 | const html = await fetch('https://hg.mozilla.org/l10n-central').then((res) =>
25 | res.text()
26 | )
27 | const $ = cheerio.load(html)
28 | const locales = $('table')
29 | .first()
30 | .find('td:first-child')
31 | .slice(1)
32 | .map((i, el) => $(el).text().trim())
33 | .toArray()
34 | console.log(locales)
35 |
36 | fs.writeJsonSync('./vendor/l10n.json', locales)
37 | done()
38 | }
39 |
40 | export const downloadL10nContent = async (done) => {
41 | const locales = fs.readJsonSync('./vendor/l10n.json')
42 | for (const locale of locales) {
43 | const res = await fetch(
44 | `https://hg.mozilla.org/l10n-central/${locale}/raw-file/tip/devtools/client/jsonview.properties`
45 | )
46 | if (!res.ok) {
47 | console.log(locale, 'not found')
48 | continue
49 | }
50 | const text = await res.text()
51 | fs.writeFileSync(`./vendor/l10n/${locale}.properties`, text)
52 | }
53 | done()
54 | }
55 |
56 | export const gecko = gulp.series(
57 | () => {
58 | return deleteAsync('./vendor/gecko')
59 | },
60 | () => {
61 | return gulp
62 | .src('./gecko.zip')
63 | .pipe(unzip())
64 | .pipe(
65 | rename((obj) => {
66 | obj.dirname = obj.dirname.replace(/mozilla-central-.*?\//, 'gecko/')
67 | })
68 | )
69 | .pipe(
70 | replace(
71 | // devtools/client/shared/components/reps/reps/custom-formatter.js
72 | `require("resource://devtools/shared/flags.js")`,
73 | '{ testing: false }'
74 | )
75 | )
76 | .pipe(
77 | replace(
78 | // devtools/client/shared/components/Tree.js
79 | `require("resource://devtools/shared/l10n.js")`,
80 | '{}'
81 | )
82 | )
83 | .pipe(
84 | replace(
85 | new RegExp('resource://', 'g'),
86 | process.cwd() + '/vendor/gecko/'
87 | )
88 | )
89 | .pipe(
90 | replace(
91 | new RegExp('chrome://devtools/skin', 'g'),
92 | 'devtools/client/themes'
93 | )
94 | )
95 | .pipe(
96 | replace(new RegExp('chrome://devtools/content', 'g'), 'devtools/client')
97 | )
98 | .pipe(
99 | gulpif(
100 | (file) => file.path.endsWith('arrow.svg'),
101 | replace(/fill="(.*?)"/, `fill="${color}"`)
102 | )
103 | )
104 | .pipe(
105 | gulpif(
106 | (file) => file.path.endsWith('filter-small.svg'),
107 | replace(/