Skip to content

Commit 054dd71

Browse files
sugarmanzsugarmanz
committed
re-introduce web-ext
1 parent 292388d commit 054dd71

File tree

20 files changed

+946
-35
lines changed

20 files changed

+946
-35
lines changed

‎devtools/client/src/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './redux';
2-
// export { Runtime } from '@player-tools/devtools-common';

‎devtools/web-ext/BUILD

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
2+
load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")
3+
load("@rules_pkg//:pkg.bzl", "pkg_zip")
4+
5+
genrule(
6+
name = "version",
7+
srcs = [
8+
"//:VERSION",
9+
],
10+
outs = ["version.json"],
11+
cmd = """echo {'"'version'"': '"'`cat $(location //:VERSION)`'"'} > $@""",
12+
)
13+
14+
# Necessary to ensure files are available in same context where output will be created
15+
# See [chdir] option on [webpack] target
16+
copy_to_bin(
17+
name = "srcs",
18+
srcs = glob(["src/**"]) + [
19+
":webpack.config.js",
20+
":postcss.config.js",
21+
":tsconfig.json",
22+
],
23+
)
24+
25+
webpack(
26+
# The name controls the output directory, which I tried to make dynamic based on
27+
# target name, but somewhere, the link was missing, so this should stay [dist]
28+
# unless you figure out how to correctly link the output directory with the files
29+
# created by webpack
30+
name = "dist",
31+
chdir = "$(RULEDIR)",
32+
data = [
33+
":srcs",
34+
":version.json",
35+
36+
# Webpack deps
37+
"@npm//@babel/preset-env",
38+
"@npm//@babel/plugin-proposal-nullish-coalescing-operator",
39+
"@npm//babel-loader",
40+
"@npm//copy-webpack-plugin",
41+
"@npm//css-loader",
42+
"@npm//html-webpack-plugin",
43+
"@npm//postcss-loader",
44+
"@npm//postcss-nested",
45+
"@npm//postcss-mixins",
46+
"@npm//postcss-simple-vars",
47+
"@npm//style-loader",
48+
"@npm//ts-loader",
49+
"@npm//url-loader",
50+
"@npm//webpack-extension-reloader",
51+
52+
# Real deps
53+
# "//devtools/common",
54+
# "//devtools/window-rpc-bridge",
55+
"//devtools/ui",
56+
"@npm//@types/react-dom",
57+
"@npm//react",
58+
"@npm//react-dom",
59+
"@npm//uuid",
60+
"@npm//webextension-polyfill-ts",
61+
"@npm//webext-redux",
62+
],
63+
output_dir = True,
64+
)
65+
66+
alias(
67+
name = "web-ext",
68+
actual = "dist",
69+
)
70+
71+
pkg_zip(
72+
name = "chrome",
73+
srcs = [
74+
":dist",
75+
],
76+
strip_prefix = "dist",
77+
)

‎devtools/web-ext/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Web extension
2+
3+
### Local development
4+
5+
1. Enable development mode: `chrome://extensions`
6+
2. Load unpacked extension from `path/to/tools/bazel-bin/devtools/web-ext/dist`
7+

‎devtools/web-ext/postcss.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// const variables = require('@cgds/styles').default;
2+
const variables = {};
3+
4+
const simpleVars = require('postcss-simple-vars');
5+
const mixins = require('postcss-mixins');
6+
7+
// const typography = require.resolve('@cgds/styles/mixins/typography.css');
8+
// const elevation = require.resolve('@cgds/styles/mixins/elevation.css');
9+
// const motion = require.resolve('@cgds/styles/mixins/motion.css');
10+
// const focus = require.resolve('@cgds/styles/mixins/focus.css');
11+
12+
/* eslint-disable global-require */
13+
module.exports = {
14+
plugins: [
15+
mixins({
16+
mixinsFiles: [
17+
// typography, elevation, motion, focus
18+
],
19+
}),
20+
require('postcss-nested'),
21+
simpleVars({
22+
variables: Object.entries(variables).reduce(
23+
(all, [name, value]) => ({ ...all, [`$${name}`]: value }),
24+
{}
25+
),
26+
}),
27+
],
28+
};

‎devtools/web-ext/src/background/background.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { wrapStore } from 'webext-redux';
2+
import { v4 as uuid } from 'uuid';
3+
import {
4+
createLogger,
5+
BACKGROUND_SOURCE,
6+
type Methods,
7+
} from '@player-tools/devtools-common';
8+
import { createDevtoolsStore } from '@player-tools/devtools-client';
9+
import { browser, Tabs } from 'webextension-polyfill-ts';
10+
11+
const logger = createLogger(BACKGROUND_SOURCE);
12+
const requestsInFlight = new Map<string, (response: Methods.Method['result']) => void>();
13+
14+
// TODO: Not sure if this belongs in background
15+
browser.runtime.onMessage.addListener((message) => {
16+
logger.log('i gots a message: ' + JSON.stringify(message));
17+
18+
const handler = requestsInFlight.get(message.id);
19+
requestsInFlight.delete(message.id);
20+
handler?.(message.result);
21+
});
22+
23+
async function sendMessage(message: Methods.Method & { id: string }) {
24+
const tabs: Tabs.Tab[] = await browser.tabs.query({
25+
active: true,
26+
currentWindow: true,
27+
});
28+
const tabId = tabs[0]?.id;
29+
if (!tabId) {
30+
return;
31+
}
32+
33+
// TODO: Can we just use the return value here?
34+
browser.tabs.sendMessage(tabId, message);
35+
}
36+
37+
38+
// Delegate to plugin for how to handle communications
39+
const methodHandler = async <T extends Methods.MethodTypes>(
40+
method: Methods.ByType<T>
41+
): Promise<Methods.ByType<T>['result']> => {
42+
return new Promise((resolve) => {
43+
const id = uuid();
44+
45+
const message = {
46+
...method,
47+
id,
48+
// TODO: Why can't I just send method w/ a uuid?
49+
// params: method.params,
50+
// type: method.type,
51+
}
52+
53+
// const result = {} as Methods.ByType<T>['result']
54+
// resolve(result)
55+
56+
requestsInFlight.set(id, resolve as any);
57+
sendMessage(message)
58+
})
59+
};
60+
61+
// TODO: publish message
62+
wrapStore(createDevtoolsStore(methodHandler));
63+
logger.log('Wrapped Redux Store');

‎devtools/web-ext/src/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const INJECTED_SCRIPT_ID = '__PLAYER_UI_RUNTIME__';

‎devtools/web-ext/src/content/content.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { browser } from 'webextension-polyfill-ts';
2+
import {
3+
Message,
4+
RUNTIME_SOURCE,
5+
CONTENT_SOURCE,
6+
createLogger,
7+
} from '@player-tools/devtools-common';
8+
import { handleMessage } from '@player-tools/devtools-client';
9+
import { INJECTED_SCRIPT_ID } from '../constants';
10+
11+
const logger = createLogger(CONTENT_SOURCE);
12+
13+
/** Create a script element to be injected into the dom */
14+
function getScript() {
15+
const injectedScript = document.createElement('script');
16+
injectedScript.src = browser.extension.getURL('../runtime/runtime.js');
17+
injectedScript.id = INJECTED_SCRIPT_ID;
18+
return injectedScript;
19+
}
20+
21+
// TODO: Barf
22+
document.documentElement.append(getScript());
23+
24+
browser.runtime.onMessage.addListener((message) => {
25+
window.postMessage(message, '*');
26+
});
27+
28+
window.addEventListener('message', (event: MessageEvent<Message>) => {
29+
if (event.source !== window) {
30+
return;
31+
}
32+
33+
if (event.data.source === RUNTIME_SOURCE) {
34+
logger.log('Sending Message to Background', event.data);
35+
// TODO: I hate that we're diverging here, like just send to a single place and observe from there
36+
browser.runtime.sendMessage(event.data);
37+
handleMessage(event.data);
38+
}
39+
});

‎devtools/web-ext/src/manifest.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "Player UI Developer Tools",
3+
"description": "Developer tooling for debugging active Player instances",
4+
"devtools_page": "panel/startup.html",
5+
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
6+
"version": "0.0.0-PLACEHOLDER",
7+
"manifest_version": 2,
8+
"background": {
9+
"scripts": ["background/background.js"]
10+
},
11+
"content_scripts": [
12+
{
13+
"matches": ["<all_urls>"],
14+
"js": ["content/content.js"],
15+
"all_frames": true,
16+
"run_at": "document_start"
17+
}
18+
],
19+
"permissions": [
20+
"tabs",
21+
"storage",
22+
"webNavigation",
23+
"clipboardRead",
24+
"clipboardWrite",
25+
"http://*/*",
26+
"https://*/*"
27+
],
28+
"web_accessible_resources": [
29+
"runtime/runtime.js",
30+
"popup/assets/*",
31+
"panel/assets/*"
32+
],
33+
"options_ui": {
34+
"page": "options/options.html",
35+
"chrome_style": true
36+
}
37+
}

‎devtools/web-ext/src/media/player-logo.png

37.6 KB
Loading

‎devtools/web-ext/src/options/options.ts

Whitespace-only changes.

‎devtools/web-ext/src/panel/global.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
margin: 0;
3+
}

‎devtools/web-ext/src/panel/panel.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import ReactDom from 'react-dom';
3+
import { AutoThemeProvider } from '@devtools-ds/themes';
4+
import { App } from '@player-tools/devtools-ui';
5+
import { proxyStore } from '../redux/proxy-store';
6+
import './global.css';
7+
8+
const ele = document.createElement('div');
9+
document.body.appendChild(ele);
10+
11+
proxyStore
12+
.ready()
13+
.then(() => ReactDom.render(
14+
<AutoThemeProvider autoStyle>
15+
<App store={proxyStore} />
16+
</AutoThemeProvider >, ele));

‎devtools/web-ext/src/panel/startup.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { browser } from 'webextension-polyfill-ts';
2+
3+
browser.devtools.panels.create(
4+
'Player',
5+
'../media/player-logo.png',
6+
'/panel/panel.html'
7+
);

‎devtools/web-ext/src/popup/popup.ts

Whitespace-only changes.

‎devtools/web-ext/src/redux/proxy-store.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Store } from 'webext-redux';
2+
3+
export const proxyStore = new Store();

‎devtools/web-ext/src/runtime/runtime.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { RUNTIME_SOURCE } from "@player-tools/devtools-common";
2+
3+
window.postMessage({type: 'runtime-init', source: RUNTIME_SOURCE}, '*')
4+
5+
console.warn("If something isn't working, maybe the runtime isn't set up? 2");

‎devtools/web-ext/tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"target": "ES6",
5+
"lib": ["ESNext", "DOM"],
6+
"outDir": "dist",
7+
"jsx": "react",
8+
"sourceMap": true,
9+
"strict": true,
10+
"esModuleInterop": true,
11+
"allowSyntheticDefaultImports": true,
12+
"importHelpers": true
13+
},
14+
"exclude": ["node_modules"]
15+
}

0 commit comments

Comments
 (0)