Chrome extension getUrl not working in injected file

Question

I'm developing a Chrome extension, is there any way to get the chrome.extension.getURL('file path') method from injected file? I'm unable to access above method from injected file.

manifest.json

{
"name": "Name",
"version": "0.1",
"description": "Name chrome extension",
"background": {
"persistent": false,
"scripts": ["js/background.js"]
},
"permissions": [
"tabs", 
"https://*/*"
],
"content_scripts": [
{
  "matches": ["https://mail.google.com/*"],
  "js": ["js/content.js"],
  "run_at": "document_end"
}
],
"web_accessible_resources": [
"js/injected.js",
"html/popup.html"
],
"manifest_version": 2
}

injected.js

console.log("Ok injected file worked");
console.log("Url: ", chrome.extension.getURL('html/popup.html'));

contentScript.js

var s = document.createElement('script');
s.src = chrome.extension.getURL('js/injected.js');
(document.head || document.documentElement).appendChild(s);

See also https://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script/9517879#9517879 — Rob W, Oct 15 '15 at 11:56

Sid · Accepted Answer · 2015-10-16T07:24:04.687

No you cant, once you inject the script in a page, it cannot access chrome.extension.getURl. But you can communicate between your injected script and content script. One of the methods is using custom events.

mainfest.json:

{
"name": "Name",
"version": "0.1",
"description": "Name chrome extension",
"background": {
"persistent": false,
"scripts": ["js/background.js"]
},
"permissions": [
"tabs", 
"https://*/*"
],
"content_scripts": [
{
  "matches": ["https://mail.google.com/*"],
  "js": ["js/content.js"],
  "run_at": "document_end"
}
],
"web_accessible_resources": [
"js/injected.js",
"html/popup.html"
],
"manifest_version": 2
}

In your injected script :

console.log("Ok injected file worked");


document.addEventListener('yourCustomEvent', function (e)
{
    var url=e.detail;
    console.log("received "+url);
});

In your content script:

var s = document.createElement('script');
s.src = chrome.extension.getURL('js/injected.js');
(document.head || document.documentElement).appendChild(s);

s.onload = function(){

  var url=chrome.runtime.getURL("html/popup.html");

  var evt=document.createEvent("CustomEvent");
  evt.initCustomEvent("yourCustomEvent", true, true, url);
  document.dispatchEvent(evt);
};

I'm getting undefined from injected script var this is my content script "url=chrome.runtime.getURL('html/popup.html'); var evt=document.createEvent("HTMLEvents"); console.log("evet: ",evt); evt.initEvent("Test initEvent", true, true, url); document.dispatchEvent(evt);" and this is my injected script "document.getElementById("sendButtonID").addEventListener('click', function (e) { var url=e.url; console.log("received "+url); });" — Bharath Kumar, Oct 15 '15 at 10:37
Please read answer carefully. In your injected script you are not adding any listener for your custom event. — Sid, Oct 15 '15 at 10:51
@BharathKumar I have edited the answer. Check if it works now — Sid, Oct 16 '15 at 07:24

score 11 · Answer 2 · edited Mar 09 '20 at 18:50

11

You have to mention the file_path or file_names in the web_accessible_resources of extension manifest.
EG:

"web_accessible_resources":[
    "styles/*",
    "yourfilename.js"
  ]

After that you can have have the file in injected script by calling the method. "chrome.extension.getURL('yourfilename.js')";

edited Mar 09 '20 at 18:50

nmu

1,290
1
16
37

answered Oct 15 '15 at 11:55

Nishan Miranda

154
6

3

I got this error "Uncaught TypeError: Cannot read property 'getURL' of undefined" – Bharath Kumar Oct 15 '15 at 12:04
see i have modified the question – Bharath Kumar Oct 16 '15 at 05:49
Nishan you're a champion! – Kunal Jun 22 '19 at 12:52
I am getting the same error: "Cannot read property 'getURL' of undefined". Any solution to this? – 55 Cancri Sep 18 '20 at 21:47

score 5 · Answer 3 · answered Jun 14 '21 at 06:35

chrome.extension.getURL is now depcrecated. Docs

Use chrome.runtime.getURL in the background script.

You need to send a message from your contentScript to backgroundScript

eg.

// contentScript.js

chrome.runtime.sendMessage({ message: "popup" }, function (response) {
  //
});

// backgroundScript.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === "popup") {
    chrome.tabs.create({ url: chrome.runtime.getURL("popup.html") });
  }
});

This is closest to correct in 2022. However, you can use chrome.runtime.getURL in the content scripts as well. — trlkly, Apr 10 '22 at 01:24

Drapaster · Answer 4 · 2018-02-08T14:07:57.050

1

Add into extension manifest.json

"web_accessible_resources": ["*.js"]

From "web_accessible_resources" manual page:

These resources would then be available in a webpage via the URL chrome-extension://[PACKAGE ID]/[PATH], which can be generated with the extension.getURL method.

edited Feb 08 '18 at 14:07

answered Feb 07 '18 at 08:05

Drapaster

89
4

score 1 · Answer 5 · answered May 16 '22 at 20:09

1

getURL is deprecated since Chrome 58.

Just replace

s.src = chrome.extension.getURL('js/injected.js');

with

s.src = chrome.runtime.getURL('js/injected.js');

answered May 16 '22 at 20:09

Moses Machua

10,562
3
34
48

Chrome extension getUrl not working in injected file

5 Answers5