Merge pull request #31 from smapiot/issue/migration-to-manifest-3

Issue/migration to manifest 3

package.json

@@ -47,6 +47,7 @@
  "@types/react": "^17.0.0",
  "@types/react-dom": "^17.0.0",
  "@types/reactstrap": "^8.7.2",
+ "@types/webextension-polyfill": "^0.10.7",
  "concurrently": "^5.3.0",
  "esbuild": "^0.15.7",
  "esbuild-copy-static-files": "^0.1.0",
@@ -65,7 +66,7 @@
  "react-flow-renderer": "^9.7.4",
  "reactstrap": "^8.10.0",
  "uuidv4": "^6.2.12",
- "webextension-polyfill-ts": "0.26.0",
+ "webextension-polyfill": "^0.10.0",
  "zustand": "^3.0.0"
  }
 }

src/app/ConnectedView.tsx

@@ -6,19 +6,44 @@ import { connectedView, tabLink, footer } from './styles';
 import { useViews } from './useViews';
 import { version } from '../../package.json';
 import { PiralDebugCapabilities } from '../types';
+import * as React from 'react';
 
 export interface ConnectedViewProps {
  capabilities: PiralDebugCapabilities;
 }
 
+const navbarHeightBreakPoint = 45;
+const getNavbarHeight = () => document.getElementById('piral-inspector-navbar')?.offsetHeight || 0;
+
 export const ConnectedView: FC<ConnectedViewProps> = ({ capabilities }) => {
  const { availableTabs, activeTab, setActiveTab } = useViews(capabilities);
+ const [height, setHeight] = React.useState(0);
+ const [vertical, setVertical] = React.useState(false);
+
+ React.useEffect(() => {
+ setHeight(getNavbarHeight());
+ window.addEventListener(
+ 'resize',
+ () => {
+ setVertical(false);
+ setHeight(getNavbarHeight());
+ },
+ false,
+ );
+ }, []);
+
+ React.useEffect(() => {
+ const needsToBeVertical = height > navbarHeightBreakPoint;
+ if (!needsToBeVertical) return;
+
+ setVertical(true);
+ }, [height, vertical]);
 
  return (
  <div css={connectedView}>
  <BasicInfo showSettings={capabilities.settings} />
- <Nav tabs>
- {availableTabs.map(tab => (
+ <Nav id="piral-inspector-navbar" tabs vertical={vertical}>
+ {availableTabs.map((tab) => (
  <NavItem key={tab.id} css={tabLink}>
  <NavLink className={activeTab === tab.id ? 'active' : ''} onClick={() => setActiveTab(tab.id)}>
  {tab.title}
@@ -27,15 +52,13 @@ export const ConnectedView: FC<ConnectedViewProps> = ({ capabilities }) => {
  ))}
  </Nav>
  <TabContent activeTab={activeTab}>
- {availableTabs.map(tab => (
+ {availableTabs.map((tab) => (
  <TabPane key={tab.id} tabId={tab.id}>
  <tab.Content active={activeTab === tab.id} />
  </TabPane>
  ))}
  </TabContent>
- <div css={footer}>
- Piral Inspector v{version}
- </div>
+ <div css={footer}>Piral Inspector v{version}</div>
  </div>
  );
 };

src/contentScript.ts

@@ -1,50 +1,54 @@
-import { browser } from 'webextension-polyfill-ts';
-import { handleLegacyMessage } from './scripts/legacy-worker';
-import type { PiralDebugApiMessage, PiralInspectorMessage } from './types';
+import { runtime } from 'webextension-polyfill';
+import { PiralDebugApiMessage, PiralInspectorMessage } from './types';
 
+/**
+ * window is marked as @deprecated in v3 but is still the official way to access external applications
+ * https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=en#host-page-communication
+ */
+const handleMessage = (message: PiralDebugApiMessage) => {
+ if (typeof message === 'object' && message?.source === 'piral-debug-api') {
+ const { content } = message;
+ runtime.sendMessage(content);
+
+ if (content.type === 'available') {
+ console.info(`Piral Inspector (${content.kind}) connected!`);
+ }
+ }
+};
 /**
  * Disconnects the Piral Inspector.
  */
 window.addEventListener('unload', () => {
- browser.runtime.sendMessage({
+ runtime.sendMessage({
  type: 'unavailable',
  });
 });
 
 /**
- * Receives messages from the piral-debug-utils.js
+ * Receives messages from the piral-debug-utils.js and forwards it to service worker
  */
-window.addEventListener('message', event => {
+window.addEventListener('message', (event) => {
  if (event.source === window) {
  const message: PiralDebugApiMessage = event.data;
-
- if (typeof message === 'object' && message?.source === 'piral-debug-api') {
- const { content } = message;
- browser.runtime.sendMessage(content);
-
- if (content.type === 'available') {
- console.info(`Piral Inspector (${content.kind}) connected!`);
- }
- }
+ handleMessage(message);
  }
 });
 
 /**
- * Receives messages from the background.js
+ * Receives messages from the service worker.js
  */
-browser.runtime.onMessage.addListener(content => {
+runtime.onMessage.addListener((content, sender) => {
  const message: PiralInspectorMessage = {
  content,
  source: 'piral-inspector',
  version: 'v1',
  };
  window.postMessage(message, '*');
- handleLegacyMessage(content);
 });
 
 /**
  * Tries to connect the instance to the dev tools.
  */
-browser.runtime.sendMessage({
+runtime.sendMessage({
  type: 'cs-connect',
 });

src/devtools.ts

@@ -1,59 +1,77 @@
-import { browser } from 'webextension-polyfill-ts';
+import { runtime, devtools } from 'webextension-polyfill';
 import { useStore } from './app/store';
-import type { PiWorkerMessage, PiHostMessage } from './types';
+import { PiHostMessage, PiWorkerMessage } from './types';
+import { DevtoolsPanels } from 'webextension-polyfill/namespaces/devtools_panels';
 
-function initPanel() {
- return browser.devtools.panels.create('Piral', '/assets/logo.png', './panel.html');
-}
+type PanelCreate = (
+ title: string,
+ iconPath: string,
+ pagePath: string,
+ panelCreatedCallback: 
+ (panel: DevtoolsPanels.ExtensionPanel) => void
+ ) => void
 
-function connectPanel(panel: any) {
- const port = browser.runtime.connect(undefined, { name: 'piral-inspector-host' });
+
+async function initDevTools() {
+ try {
+ const port = runtime.connect(undefined, { name: 'piral-inspector-host' });
 
- const sendMessage = (message: PiHostMessage) => {
- const tabId = browser.devtools.inspectedWindow.tabId;
- port.postMessage({
- message,
- tabId,
- });
- };
-
- panel.onShown.addListener((panelWindow: Window) => {
- panelWindow.sendCommand = sendMessage;
- panelWindow.dispatchEvent(new CustomEvent('pi-store', { detail: useStore }));
- });
-
- port.onMessage.addListener((message: PiWorkerMessage) => {
- const { actions } = useStore.getState();
-
- switch (message.type) {
- case 'available':
- return actions.connect(message.name, message.version, message.kind, message.capabilities, message.state);
- case 'unavailable':
- return actions.disconnect();
- case 'pilets':
- return actions.updatePilets(message.pilets);
- case 'routes':
- return actions.updateRoutes(message.routes);
- case 'settings':
- return actions.updateSettings(message.settings);
- case 'container':
- return actions.updateContainer(message.container);
- case 'events':
- return actions.updateEvents(message.events);
- case 'extensions':
- return actions.updateExtensions(message.extensions);
- case 'info':
- return actions.updateInfo(message.name, message.version, message.kind, message.capabilities);
- case 'dependency-map':
- return actions.updateDependencyMap(message.dependencyMap);
- }
- });
-
- sendMessage({ type: 'init' });
-}
+ const sendMessage = (message: PiHostMessage) => {
+ const tabId = devtools.inspectedWindow.tabId;
+ port.postMessage({
+ message,
+ tabId,
+ });
+ };
+
+ /**
+ * Cast needed because webextension polyfill does not support the right interfacing for v3
+ * official documentation: https://developer.chrome.com/docs/extensions/reference/api/devtools/panels?hl=en#example
+ */
+ const panelCreate = devtools.panels.create as unknown as PanelCreate
+
+ /**
+ * Call is asynchronus but doesnt provide promise anymore, needs to be done with callback
+ */
+ panelCreate('Piral', '/assets/logo.png', './panel.html', (panel: DevtoolsPanels.ExtensionPanel) => {
+ panel.onShown.addListener((panelWindow: Window) => {
 
-function logError(err: Error) {
- console.error('An unexpected error occured while setting up the panels.', err);
+ panelWindow.sendCommand = sendMessage;
+ panelWindow.dispatchEvent(new CustomEvent('pi-store', { detail: useStore }));
+ });
+
+ port.onMessage.addListener((message: PiWorkerMessage) => {
+ const { actions } = useStore.getState();
+
+ switch (message.type) {
+ case 'available':
+ return actions.connect(message.name, message.version, message.kind, message.capabilities, message.state);
+ case 'unavailable':
+ return actions.disconnect();
+ case 'pilets':
+ return actions.updatePilets(message.pilets);
+ case 'routes':
+ return actions.updateRoutes(message.routes);
+ case 'settings':
+ return actions.updateSettings(message.settings);
+ case 'container':
+ return actions.updateContainer(message.container);
+ case 'events':
+ return actions.updateEvents(message.events);
+ case 'extensions':
+ return actions.updateExtensions(message.extensions);
+ case 'info':
+ return actions.updateInfo(message.name, message.version, message.kind, message.capabilities);
+ case 'dependency-map':
+ return actions.updateDependencyMap(message.dependencyMap);
+ }
+ });
+
+ sendMessage({ type: 'init' });
+ });
+ } catch (err) {
+ console.error(err.message);
+ }
 }
 
-initPanel().then(connectPanel).catch(logError);
+initDevTools();