29

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);
brasofilo
  • 25,496
  • 15
  • 91
  • 179
Bharath Kumar
  • 820
  • 1
  • 9
  • 21
  • 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

6 Answers6

19

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") });
  }
});
Anurag Bhagsain
  • 363
  • 3
  • 10
  • 4
    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
18

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);
};
Siddharth
  • 6,966
  • 2
  • 19
  • 34
  • 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. – Siddharth Oct 15 '15 at 10:51
  • @BharathKumar I have edited the answer. Check if it works now – Siddharth Oct 16 '15 at 07:24
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')";

nmu
  • 1,442
  • 2
  • 20
  • 40
Nishan Miranda
  • 154
  • 6
8

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');
Moses Machua
  • 11,245
  • 3
  • 36
  • 50
  • Deprecated (which, admittedly, it what the docs say) suggests it will still work but you are "being naughty". with 114+ there is a "no such function" error. – AntonOfTheWoods Jul 10 '23 at 14:13
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.

Drapaster
  • 99
  • 4
0

Insert images using your content script in v3

  1. Put your images inside an images directory

  2. List the image you wish you insert in your manifest using

...
"web_accessible_resources": [
    {
      "resources": [ "images/image-1.jpg", "images/icon-128.png" ],
      "matches": ["https://*.google.com/*"]
    }
  ],
...

You can use "/images/" to expose everything in the extension's images/ directory*

  1. Run this code inside your content-script.js

...

const Image = document.createElement("img");
src = chrome.runtime.getURL("images/image-1..jpg"
buttonImage.src = src;

...

This should work, let me know how it goes...

Francis Uloko
  • 11
  • 2