10 | 
11 | 
12 |
13 | ## Development
14 |
15 | ```bash
16 | yarn dev
17 | ```
18 |
19 | Then the extension will be bundled into `extension` folder. Drag the folder to Chrome / Edge or Firefox's extension page to use it.
20 |
21 | If you want a production build instead, run:
22 |
23 | ```bash
24 | yarn build
25 | ```
26 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | ['@babel/preset-typescript', {
4 | jsxPragma: 'h'
5 | }],
6 | [
7 | '@babel/preset-env',
8 | {
9 | modules: false,
10 | },
11 | ],
12 | ],
13 | plugins: [
14 | '@babel/plugin-proposal-optional-chaining',
15 | '@babel/plugin-proposal-class-properties',
16 | [
17 | '@babel/plugin-transform-react-jsx',
18 | {
19 | pragma: 'h',
20 | },
21 | ],
22 | ],
23 | }
24 |
--------------------------------------------------------------------------------
/extension/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egoist/logbox/dc82215510d4f1e180230d0ce58f840e851c82e1/extension/icon.png
--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "LogBox",
3 | "version": "0.0.2",
4 | "description": "View logs on any webpage without opening devtools",
5 | "homepage_url": "https://logbox.egoist.sh",
6 | "manifest_version": 2,
7 | "minimum_chrome_version": "74",
8 | "icons": {
9 | "128": "icon.png"
10 | },
11 | "permissions": ["storage"],
12 | "options_ui": {
13 | "page": "options.html"
14 | },
15 | "content_scripts": [
16 | {
17 | "matches": ["*://*/*"],
18 | "run_at": "document_start",
19 | "js": ["./dist/browser-polyfill.min.js", "./dist/content.js"]
20 | }
21 | ],
22 | "web_accessible_resources": ["dist/script.js"]
23 | }
24 |
--------------------------------------------------------------------------------
/extension/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ${escapeHTML(
53 | (arg.stack || '')
54 | .replace(`${arg.name}: ${arg.message}`, '')
55 | .replace(/^\s+/gm, '')
56 | )}`
57 | }
58 |
59 | return result
60 | }
61 |
62 | const options = JSON.parse(document.currentScript?.dataset.options || '{}')
63 |
64 | const toast = (args: any[], type: ToastType, location?: string) => {
65 | const message = args
66 | .map((arg) => stringifyArg(arg, type))
67 | .filter(Boolean)
68 | .join(' ')
69 | new Toast({
70 | html: `${message}${location ? ` (${location})` : ''}`,
71 | type,
72 | timeout: options.hideTimeout,
73 | }).show()
74 | }
75 |
76 | console.error = (...args: any[]) => {
77 | toast(args, 'error')
78 | consoleError(...args)
79 | }
80 |
81 | console.log = (...args: any[]) => {
82 | toast(args, 'info')
83 | consoleLog(...args)
84 | }
85 |
86 | console.warn = (...args: any[]) => {
87 | toast(args, 'warning')
88 | consoleWarn(...args)
89 | }
90 |
91 | console.info = (...args: any[]) => {
92 | toast(args, 'info')
93 | consoleInfo(...args)
94 | }
95 |
96 | window.addEventListener('error', (error) => {
97 | if (__DEV__) {
98 | consoleError(`[logbox] detected global error`)
99 | }
100 | toast([error], 'error')
101 | consoleError(error)
102 | })
103 |
104 | window.addEventListener('unhandledrejection', (error) => {
105 | toast([error], 'error')
106 | consoleError(error)
107 | })
108 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Basic Options */
4 | // "incremental": true, /* Enable incremental compilation */
5 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
7 | // "lib": [], /* Specify library files to be included in the compilation. */
8 | // "allowJs": true, /* Allow javascript files to be compiled. */
9 | // "checkJs": true, /* Report errors in .js files. */
10 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
11 | "jsxFactory": "h",
12 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
13 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
14 | // "sourceMap": true, /* Generates corresponding '.map' file. */
15 | // "outFile": "./", /* Concatenate and emit output to single file. */
16 | // "outDir": "./", /* Redirect output structure to the directory. */
17 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
18 | // "composite": true, /* Enable project compilation */
19 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
20 | // "removeComments": true, /* Do not emit comments to output. */
21 | // "noEmit": true, /* Do not emit outputs. */
22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
23 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
24 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
25 |
26 | /* Strict Type-Checking Options */
27 | "strict": true, /* Enable all strict type-checking options. */
28 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
29 | // "strictNullChecks": true, /* Enable strict null checks. */
30 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
31 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
32 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
33 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
34 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
35 |
36 | /* Additional Checks */
37 | // "noUnusedLocals": true, /* Report errors on unused locals. */
38 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
39 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
40 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
41 |
42 | /* Module Resolution Options */
43 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
44 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
45 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
46 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
47 | // "typeRoots": [], /* List of folders to include type definitions from. */
48 | // "types": [], /* Type declaration files to be included in compilation. */
49 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
50 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
51 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
52 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
53 |
54 | /* Source Map Options */
55 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
56 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
57 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
58 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
59 |
60 | /* Experimental Options */
61 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
62 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
63 |
64 | /* Advanced Options */
65 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
66 | },
67 | "include": ["types.d.ts", "src/**/*"]
68 | }
69 |
--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
1 | declare const __DEV__: boolean
2 |
3 | declare const browser: import('webextension-polyfill-ts').Browser
4 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const { DefinePlugin } = require('webpack')
3 | const SizePlugin = require('size-plugin')
4 | const CopyWebpackPlugin = require('copy-webpack-plugin')
5 |
6 | const isProd = process.argv.includes('production')
7 |
8 | /** @type {import('webpack').Configuration} */
9 | module.exports = {
10 | devtool: isProd ? false : 'sourcemap',
11 | stats: 'errors-only',
12 | entry: {
13 | content: './src/content',
14 | script: './src/script',
15 | options: './src/options',
16 | },
17 | output: {
18 | path: path.join(__dirname, 'extension/dist'),
19 | filename: '[name].js',
20 | },
21 | resolve: {
22 | extensions: ['.ts', '.tsx', '.js', '.json', '.css'],
23 | },
24 | module: {
25 | rules: [
26 | {
27 | test: /\.css$/i,
28 | use: ['vue-style-loader', 'css-loader'],
29 | },
30 | {
31 | test: [/\.jsx?$/, /\.tsx?$/],
32 | exclude: /node_modules/,
33 | use: [
34 | {
35 | loader: 'babel-loader',
36 | options: {
37 | cacheDirectory: true,
38 | },
39 | },
40 | ],
41 | },
42 | ],
43 | },
44 | plugins: [
45 | new SizePlugin(),
46 | new CopyWebpackPlugin([
47 | {
48 | from: 'public',
49 | to: '.',
50 | },
51 | ]),
52 | new DefinePlugin({
53 | __DEV__: process.argv.includes('development'),
54 | }),
55 | ],
56 | }
57 |
--------------------------------------------------------------------------------