Merge branch 'main' of github.com:earvinpiamonte/jira-software-tool i…

…nto main

package.json

@@ -8,7 +8,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
-    "@types/chrome": "0.0.128",
+    "@types/chrome": "^0.0.145",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.22",
     "@types/react": "^17.0.0",

public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Jira Software Tool",
   "short_name": "jira-software-tool",
   "description": "A Google Chrome extension for Jira Software. Easily copy issue/ ticket ID, title and URL to clipboard.",
@@ -8,15 +8,10 @@
   "permissions": [
     "activeTab",
     "tabs",
-    "declarativeContent"
+    "declarativeContent",
+    "scripting"
   ],
-  "background": {
-    "scripts": [
-      "chrome/background.js"
-    ],
-    "persistent": false
-  },
-  "page_action": {
+  "action": {
     "default_popup": "index.html?page=Popup",
     "default_title": "Open Jira Software Tool"
   },

src/App.tsx

@@ -4,7 +4,7 @@ import ErrorBoundary from "./boundaries/ErrorBoundary";
 import ThemeProvider from "./providers/ThemeProvider";
 import useChromeManifest from "./hooks/useChromeManifest";
 
-const App = ({ page }: { page: string }) => {
+const App = ({ page = "Options" }: { page: string }) => {
   const manifest = useChromeManifest();
   const Page = React.lazy(() => import(`./pages/${page}`));
 

src/hooks/useChromeManifest.tsx

@@ -6,7 +6,7 @@ const useChromeManifest = () => {
 
   const loadManifest = async () => {
     const manifestData =
-      typeof chrome.runtime.getManifest === "function"
+      typeof chrome.runtime?.getManifest === "function"
         ? chrome.runtime.getManifest()
         : // Fallback to get manifest via `fetch` if `chrome.runtime.getManifest` is undefined
           await import("../utils/ApiRequests").then(({ getManifest }) =>

src/hooks/useTicketWithChrome.tsx

@@ -12,22 +12,31 @@ const useTicketWithChrome = () => {
 
   React.useEffect(() => {
     if (typeof chrome.tabs !== "undefined") {
-      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        // console.log(tabs);
-        // Get ticket details result from DOM
-        chrome.tabs.executeScript(
-          { code: `(${getTicketFromDOM})();` },
-          (results) => {
-            const ticket = results[0];
-            const { issueTitle, issueID, issueURL } = ticket;
+      chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+        try {
+          // Get ticket details result from DOM
+          chrome.scripting.executeScript(
+            {
+              target: {
+                tabId: tab.id ?? chrome.tabs.TAB_ID_NONE,
+                allFrames: true,
+              },
+              function: getTicketFromDOM,
+            },
+            (results) => {
+              const { result } = results[0];
+              const { issueTitle, issueID, issueURL } = result;
 
-            setTicket({
-              issueTitle,
-              issueID,
-              issueURL,
-            });
-          }
-        );
+              setTicket({
+                issueTitle,
+                issueID,
+                issueURL,
+              });
+            }
+          );
+        } catch (error) {
+          console.log("Script execution error: ", error);
+        }
       });
     }
   }, []);

tsconfig.chrome.webpack.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "./build/chrome/",
+    "outDir": "./build/",
     "noImplicitAny": true,
     "module": "esnext",
     "target": "es5",

webpack.chrome.config.js

@@ -14,7 +14,7 @@ module.exports = {
   },
   output: {
     filename: "[name].js",
-    path: path.resolve(__dirname, "./build/chrome/"),
+    path: path.resolve(__dirname, "./build/"),
   },
   module: {
     rules: [