Background: I’m making a chrome extension, and I must migrate it to MV3. I modified my manifest.json file to include web resources, but when I go to inject my resource from my content script using chrome.runtime.getURL, it says it can’t find my file. Specifically…
GET: Chrome-extension:://”the_url/inject_script.js” net::ERR_FILE_NOT_FOUND
I’m using the content root path to my web resource (javascript elements I want to inject onto the page), which is what I read needed to be used when using MV3. Below is my manifest file.
Manifest.json
{ "manifest_version": 3, "name": "Extension Prototype", "description": "Prototype for Canvas Extension", "version": "0.1.0", "icons": { }, "web_accessible_resources": [{ "resources": ["frontend/canvas-chrome-ext/src/scripts/inject_script.js"], "matches": ["<all_urls>"] }], "action": { "default_popup": "components/popup.html", "default_icon": "images/su_emblem.png" }, "permissions": [ "activeTab", "<all_urls>", "tabs", "scripting" ], "background": { "service_worker": "background.js" }, "content_scripts": [{ "matches": ["https://seattleu.instructure.com/", "*://www.google.com/", "https://canvas.instructure.com/*"], "js": ["scripts/Content.js"] }] }
Content Script
Below is my content script, which is supposed to create a scrip DOM element. The script (inject_script.js) element injects some buttons onto the webpage.
function injectScript(file_path, tag){ var node = document.getElementsByTagName(tag)[0]; var script = document.createElement("script"); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', file_path); node.appendChild(script); } injectScript(chrome.runtime.getURL("frontend/canvas-chrome-ext/src/scripts/inject_script.js"), 'body');
Below is my project directory.
Advertisement
Answer
wOxxOm answer helped me.
I was using the content root path to reference my inject_script, but I should have been using the final path in the dist folder instead.