Don't insert content script on chrome:// pages when autofill is enabled

package.json

@@ -34,7 +34,6 @@
     "@types/uuid": "^3.4.9",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
-    "@vue/runtime-dom": "^3.2.47",
     "@vue/test-utils": "^1.1.1",
     "base64-loader": "^1.0.0",
     "buffer": "^6.0.3",
@@ -60,7 +59,7 @@
     "util": "^0.12.5",
     "vue-loader": "^15.10.1",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.7.0",
+    "vue-template-compiler": "^2.7.16",
     "webpack": "^5.11.0",
     "webpack-cli": "^5.0.0",
     "webpack-merge": "^5.0.0"
@@ -73,7 +72,7 @@
     "qrcode-generator": "^1.4.4",
     "qrcode-reader": "^1.0.4",
     "uuid": "^3.4.0",
-    "vue": "^2.6.12",
+    "vue": "^2.7.16",
     "vue2-dragula": "^2.5.4",
     "vuex": "^3.4.0"
   }

src/background.ts

@@ -3,7 +3,12 @@ import { Encryption } from "./models/encryption";
 import { EntryStorage, ManagedStorage } from "./models/storage";
 import { Dropbox, Drive, OneDrive } from "./models/backup";
 import * as uuid from "uuid/v4";
-import { getSiteName, getMatchedEntries, getCurrentTab } from "./utils";
+import {
+  getSiteName,
+  getMatchedEntries,
+  getCurrentTab,
+  okToInjectContentScript,
+} from "./utils";
 import { CodeState } from "./models/otp";
 
 import { getOTPAuthPerLineFromOPTAuthMigration } from "./models/migration";
@@ -456,7 +461,7 @@ chrome.commands.onCommand.addListener(async (command: string) => {
       }
 
       tab = await getCurrentTab();
-      if (tab.id) {
+      if (okToInjectContentScript(tab)) {
         await chrome.scripting.executeScript({
           target: { tabId: tab.id },
           files: ["/dist/content.js"],
@@ -473,7 +478,7 @@ chrome.commands.onCommand.addListener(async (command: string) => {
 
     case "autofill":
       tab = await getCurrentTab();
-      if (tab.id) {
+      if (okToInjectContentScript(tab)) {
         await chrome.scripting.executeScript({
           target: { tabId: tab.id },
           files: ["/dist/content.js"],

src/components/Popup/AddMethodPage.vue

@@ -14,7 +14,7 @@
 </template>
 <script lang="ts">
 import Vue from "vue";
-import { getCurrentTab } from "../../utils";
+import { getCurrentTab, okToInjectContentScript } from "../../utils";
 export default Vue.extend({
   methods: {
     showInfo(page: string) {
@@ -33,7 +33,7 @@ export default Vue.extend({
 
       // Insert content script
       const tab = await getCurrentTab();
-      if (tab.id) {
+      if (okToInjectContentScript(tab)) {
         await chrome.scripting.executeScript({
           target: { tabId: tab.id },
           files: ["/dist/content.js"],

src/components/Popup/EntryComponent.vue

@@ -90,7 +90,7 @@ import { mapState } from "vuex";
 import * as QRGen from "qrcode-generator";
 import { OTPEntry, OTPType, CodeState, OTPAlgorithm } from "../../models/otp";
 import { EntryStorage } from "../../models/storage";
-import { getCurrentTab } from "../../utils";
+import { getCurrentTab, okToInjectContentScript } from "../../utils";
 
 import IconMinusCircle from "../../../svg/minus-circle.svg";
 import IconRedo from "../../../svg/redo.svg";
@@ -223,13 +223,12 @@ export default Vue.extend({
             if (this.$store.state.menu.useAutofill) {
               await insertContentScript();
               const tab = await getCurrentTab();
-              if (!tab || !tab.id) {
-                return;
+              if (tab && tab.id) {
+                chrome.tabs.sendMessage(tab.id, {
+                  action: "pastecode",
+                  code: entry.code,
+                });
               }
-              chrome.tabs.sendMessage(tab.id, {
-                action: "pastecode",
-                code: entry.code,
-              });
             }
 
             const lastActiveElement = document.activeElement as HTMLElement;
@@ -296,8 +295,8 @@ function getQrUrl(entry: OTPEntry) {
 }
 
 async function insertContentScript() {
-  const tab = await getCurrentTab();
-  if (tab.id) {
+  let tab = await getCurrentTab();
+  if (okToInjectContentScript(tab)) {
     await chrome.scripting.executeScript({
       target: { tabId: tab.id },
       files: ["/dist/content.js"],

src/components/Popup/MainHeader.vue

@@ -74,7 +74,7 @@
 <script lang="ts">
 import Vue from "vue";
 import { mapState } from "vuex";
-import { getCurrentTab } from "../../utils";
+import { getCurrentTab, okToInjectContentScript } from "../../utils";
 
 // Icons
 import IconCog from "../../../svg/cog.svg";
@@ -160,7 +160,7 @@ export default Vue.extend({
 
       const tab = await getCurrentTab();
       // Insert content script
-      if (tab.id) {
+      if (okToInjectContentScript(tab)) {
         await chrome.scripting.executeScript({
           target: { tabId: tab.id },
           files: ["/dist/content.js"],

src/utils.ts

@@ -143,3 +143,20 @@ export async function getCurrentTab() {
   const [tab] = await chrome.tabs.query(queryOptions);
   return tab;
 }
+
+interface TabWithIdAndURL extends chrome.tabs.Tab {
+  id: number;
+  url: string;
+}
+
+export function okToInjectContentScript(
+  tab: chrome.tabs.Tab
+): tab is TabWithIdAndURL {
+  return (
+    tab.id !== undefined &&
+    tab.url !== undefined &&
+    (tab.url.startsWith("https://") ||
+      tab.url.startsWith("http://") ||
+      tab.url.startsWith("file://"))
+  );
+}