chore: Initial commit

Update README.md (#1)

inject something to window object

use chrome.devtools.inspectedWindow.eval to inject TOKEN to window
object.

remove useless files

rename

capture messages from @opensumi/ide-connection and show them in a demo (#10)

* capture messages from @opensumi/ide-connection and show them in a demo

* useEffect not used, remvoe it

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    // "@babel/preset-env"
+    "@babel/preset-react"
+    // "react-app"
+  ],
+  "plugins": [
+    // "@babel/plugin-proposal-class-properties",
+    "react-hot-loader/babel"
+  ]
+}

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "react-app",
+  "globals": {
+    "chrome": "readonly"
+  }
+}

.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.history
+.vscode
+
+# secrets
+secrets.*.js

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "requirePragma": false,
+  "arrowParens": "always"
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Michael Xieyang Liu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,36 @@
+# OpenSumi DevTools
+
+
+## Contributing
+
+Please read [CONTRIBUTING](./CONTRIBUTING.md) if you are new here or not familiar with the basic rules of Git/GitHub world.
+
+### Quickstart
+
+1. Clone this repository
+
+2. cd into this repository
+
+3. yarn install
+
+4. yarn run start
+
+5. Load the freshly built unpacked extension on Chrome following:
+
+   1. Access chrome://extensions/
+
+   2. Check "Developer mode"
+
+   3. Click on "Load unpacked extension"
+
+   4. Select the "build" folder under the project root directory
+
+   5. Keep "service worker" DevTools page open ([why?](https://github.com/hypertrons/hypertrons-crx/pull/274#discussion_r811878203))
+
+6. Happy hacking!
+
+### HMR & auto-reload
+
+If you are developing Options page or Popup page, each time you save files the pages will hot replace the modules without refreshing, which means you can see the changes right away.
+
+However, if you are developing Background or ContentScripts, each time you save files the service worker will reload the extension automatically. And if you are developing ContentScripts, then pages that injected with ContentScripts will refresh themselves to run the newest scripts.

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "opensumi-devtools",
+  "version": "0.1.0",
+  "description": "A Chrome DevTools Extension for OpenSumi.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "scripts": {
+    "build": "node utils/build.js",
+    "start": "node utils/server.js",
+    "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
+  },
+  "dependencies": {
+    "@hot-loader/react-dom": "^17.0.2",
+    "echarts": "^5.3.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hot-loader": "^4.13.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@types/chrome": "^0.0.177",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.3",
+    "babel-preset-react-app": "^10.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "css-loader": "^6.6.0",
+    "eslint": "^8.8.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "prettier": "^2.5.1",
+    "querystring": "^0.2.1",
+    "sass": "^1.52.3",
+    "sass-loader": "^12.4.0",
+    "source-map-loader": "^3.0.1",
+    "ssestream": "^1.1.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.3.1"
+  }
+}

src/capturer/index.js

@@ -0,0 +1,54 @@
+import evalInWindow from '../utils/eval';
+
+const startCapturing = () => {
+  return evalInWindow(() => {
+    // Return if messages are already being listened to prevent duplicates
+    // when reloading the extension
+    if (window.__opensumi_devtools.messages != null) {
+      window.__opensumi_devtools.messages = [];
+      return;
+    }
+
+    window.__opensumi_devtools.messages = [];
+
+    window.__opensumi_devtools.capture = (msg) => {
+      if (window.__opensumi_devtools.evaling) return;
+
+      try {
+        msg = JSON.stringify(msg);
+      } catch (error) {
+        msg = `Failed to serialize args to JSON: ${error.message || error}`;
+      }
+
+      window.__opensumi_devtools.messages.push({
+        time: new Date().toLocaleString(),
+        msg: msg,
+      });
+    };
+  });
+};
+
+const stopCapturing = () => {
+  return evalInWindow(() => {
+    if (window.__opensumi_devtools.messages)
+      delete window.__opensumi_devtools.messages;
+    if (window.__opensumi_devtools.capture)
+      delete window.__opensumi_devtools.capture;
+  });
+};
+
+const getMessages = () => {
+  return evalInWindow(() => {
+    const messages = window.__opensumi_devtools.messages;
+    if (messages) window.__opensumi_devtools.messages = [];
+    return messages;
+  }).then((messages) => {
+    if (messages) return messages;
+
+    // Start listening for messages if array is missing meaning
+    // the window was reloaded
+    return startCapturing().then(() => []);
+  });
+};
+
+export { startCapturing, stopCapturing, getMessages };

src/manifest.json

@@ -0,0 +1,27 @@
+{
+  "manifest_version": 3,
+  "name": "OpenSumi DevTools",
+  "options_page": "options.html",
+  "background": { "service_worker": "background.bundle.js" },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": "logo.png"
+  },
+  "icons": {
+    "128": "logo.png"
+  },
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "js": ["contentScript.bundle.js"],
+      "css": ["content.styles.css"]
+    }
+  ],
+  "devtools_page": "devtools.html",
+  "web_accessible_resources": [
+    {
+      "resources": ["content.styles.css", "logo.png"],
+      "matches": []
+    }
+  ]
+}

src/pages/Background/index.js

@@ -0,0 +1 @@
+console.log('This is the background page.');

src/pages/ContentScripts/index.js

@@ -0,0 +1 @@
+console.log('Content script works!');

src/pages/Devtools/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title></title>
+  </head>
+
+  <body></body>
+</html>

src/pages/Devtools/index.js

@@ -0,0 +1,5 @@
+chrome.devtools.panels.create(
+  'OpenSumi DevTools',
+  'logo.png',
+  'panel.html'
+);

src/pages/Options/Options.css

@@ -0,0 +1,8 @@
+.OptionsContainer {
+  width: 100%;
+  height: 50vh;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/pages/Options/Options.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Options.css';
+
+interface Props {
+  title: string;
+}
+
+const Options: React.FC<Props> = ({ title }: Props) => {
+  return <div className="OptionsContainer">{title} Page</div>;
+};
+
+export default Options;

src/pages/Options/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Settings</title>
+  </head>
+
+  <body>
+    <div id="app-container"></div>
+  </body>
+</html>

src/pages/Options/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import Options from './Options';
+import './index.css';
+
+render(
+  <Options title={'Settings'} />,
+  window.document.querySelector('#app-container')
+);
+
+if (module.hot) module.hot.accept();

src/pages/Panel/Panel.css

@@ -0,0 +1,7 @@
+body {
+  background-color: white;
+}
+
+.container {
+  color: black;
+}