0

I have a Chrome Extension that when I click on a button on the Popup page, it sends a msg to a Background script. This Background script then creates a Tab and the URL is just the index.html file that goes along in the extension installation. (it's in the root of the extension's folder)

chrome.tabs.create({ url: "index.html" }, (tab) => { });

Well, it does create the tab with the correct index.html, but the url in the address bar / omnibox is:

chrome-extension://pdkkaldkelomkfiohdhcklphjclggmoh/index.html

And the problem is that I need to attach a Content Script for this index.html and in the Official Chrome Docs at https://developer.chrome.com/docs/extensions/mv3/match_patterns/ there's no matches for something like: chrome-extension://

I tried using: and file:///* , no error msgs, but when I'm at the index.html page, in the Dev Tools I check for the Content Scripts tab, but the content.js was not loaded.

Also tested with:

"content_scripts": [
    {
      "matches": [
        "*://pdkkaldkelomkfiohdhcklphjclggmoh/index.html"
      ],
      "js": [
        "content.js"
      ]
    }
  ]

no error msgs, and with the full path: "chrome-extension://pdkkaldkelomkfiohdhcklphjclggmoh/index.html" I get an error when refreshing the extension:

Invalid value for 'content_scripts[0].matches[0]': Invalid scheme.
Could not load manifest.

It doesn't accept the "chrome-extension://" part of the match string.

I'm probably doing something wrong because I'm sure I can work with a local file that will be installed as part of the extension's set of files.

Any ideas please let me know and thanks in advance!

Koder T.
  • 43
  • 3

1 Answers1

0

Content scripts are designed to be added to foreign pages that don't belong to your own extension whereas index.html belongs to your extension, the technical meaning is that the URL starts with chrome-extension://yourExtensionID/ in Chrome or moz-extension://yourExtensionID/ in FF.

So simply load the script in your index.html:

<script src="index.js"></script>

Note that by default extension pages disallow inline JS (scripts without src or attributes like onclick), see this topic for more info in case you want to use inline JS anyway.

wOxxOm
  • 43,497
  • 7
  • 75
  • 96
  • I already have the index.js loaded in the same way as you mentioned above, but I guess the important part of your comment is that you say: "Content scripts are designed to be added to foreign pages that don't belong to your own extension..." which I realize now is the key ... I mean, I'm thinking in a wrong way, instead of trying to attach a content script into my index.html, I'll need a way to make the background script (in manifest v3, bg script is a service worker) send a msg to index.js? – Koder T. Mar 01 '21 at 10:21
  • See [Pass data or modify extension html in a new tab/window](https://stackoverflow.com/a/54715122) – wOxxOm Mar 01 '21 at 10:35
  • Thanks, I'll definitely check that out :-) – Koder T. Mar 02 '21 at 03:19