Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome extension getUrl not working in injected file

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);
like image 329
Bharath Kumar Avatar asked Oct 15 '15 09:10

Bharath Kumar


People also ask

What is chrome runtime?

Description. Use the chrome. runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs.

What is content scripts?

A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the website itself, such as those loaded using the <script> element).

Can't establish connection to receive end does not exist Chrome?

receiving end does not exist error is fixed by disabling specific Chrome extensions. We have managed to explain the complete process, and you remember the details in the following list: Fixing the unchecked runtime. lasterror: could not establish a connection.

What is Web_accessible_resources?

Using web_accessible_resources This prevents websites from fingerprinting a browser by examining the extensions it has installed. Note: In Chrome in Manifest V2, an extension's ID is fixed.


3 Answers

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);
};
like image 103
Sid Avatar answered Oct 26 '22 23:10

Sid


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')";

like image 34
Nishan Miranda Avatar answered Oct 27 '22 00:10

Nishan Miranda


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") });
  }
});
like image 27
Anurag Bhagsain Avatar answered Oct 26 '22 23:10

Anurag Bhagsain