I'm building out an extension and I'm trying to keep it well structured. Part of it will use a templating system of some type (Mustache, Handlebars, etc). Note that I'm already aware of having to use a specific non-eval version of what ever library I go with.
The problem is that from within the app.js script (the core logic) I cannot XHR to load the contents of the files in /templates (see below).
The load event never fires, and when I examine with onreadystatechange it immediate jumps to state 4 with a status code of 0. (state 4 and status 200 are what we want).
Getting the Chrome url for the file works, e.g.
chrome.extension.getURL('templates/view1.html')
//chrome-extension://hdhpjlpbepobcdgnkklnakdpoojaahjg/templates/view1.html
I suspect there's something in my manifest.json that isn't configured right. I've read through the CSP docs but nothing is jumping out at me why accessing files local to the extension should be denied. Note that the XHR requests don't throw errors, they just never return data.
The structure of the app is like this:
/manifest.json
/src
app.js
style.css
/libs
jquery.js
mustache.js
/templates
view1.html
view2.html
Manifest.json
{
"name": "Test Extension",
"version": "0.0.1",
"manifest_version": 2,
"icons": {
// "16": "",
// "48": ""
// "128": ""
},
// "default_locale": "en",
"permissions": [
"contentSettings",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": [
"https://www.google.com/search*"
],
"css": [
"src/style.css"
],
"js": [
"src/app.js",
"libs/jquery.js",
"libs/mustache.js"
],
"run_at": "document_start"
}
]
}
You need to list the files you want to load in a web_accessible_resources section in your manifest.
Related
So I tried to create a new Chrome extension for the Chrome web store, and everything seemed to upload and publish correctly.
However now when I try to load the page for the extension, it is broken.
Chrome gives me this error in the console:
POST https://chrome.google.com/webstore/ajax/detail?hl=en-US&gl=US&pv=20170811&mce=atf%2Cpii%2Crtr%2Crlb%2Cgtc%2Chcn%2Csvp%2Cwtd%2Cnrp%2Chap%2Cnma%2Cc3d%2Cncr%2Cctm%2Cac%2Chot%2Ceuf%2Cmac%2Cfcf%2Crma%2Crae%2Cshr%2Cesl%2Cigb&id=gpgcbiaclhpaiknckdfdpbjkdgfkimmo&container=CHROME&_reqid=706656&rt=j 404 ()
And I get the error message:
There was a problem loading the item. Please refresh the page and try again.
As far as I can tell, my manifest.json is correct:
{
"name": "Chinese Personalized Colors",
"version": "0.0.0.1",
"short_name": "CPC",
"manifest_version": 2,
"description": "Color code individual Chinese characters",
"options_ui": {
"chrome_style": true,
"page": "options.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "file:///*/*", "\u003Call_urls>"],
"css": ["mystyles.css"],
"js": ["jquery-1.7.2.min.js", "highlight_class_version.js", "content.js"],
"all_frames": true
}
],
"permissions": ["storage", "http://*/*"],
"background": {
"scripts": ["dict.js", "main.js", "background.js"]
},
"browser_action": {
"default_title": "CPC"
},
"icons": {
"128": "cpc-128px.png",
"48": "cpc-48px.png",
"16": "cpc-16px.png"
},
"author": "My Name",
"web_accessible_resources": ["css/*", "js/*", "images/*"]
}
All the images and all the files above exist in the zip uploaded to Google.
I tried logging out and logging back in as this was recommended advice by some people.
What could be wrong? Could it just be that the app hasn't been published for long enough to work correctly? The stack trace isn't really telling me much and I can't find any documentation on recent uploads causing an error like this anywhere.
It started working with no uploaded changes on my part. As far as I can tell, sometimes it takes time for an app to propagate to the Web Store, even when the listing appears.
When developing my extension and testing it by loading unpacked extension I am able to get the correct path.
For example the following code points to one of my images and loads correctly.
theIcon.src = chrome.runtime.getUrl(goatPath); // "chrome-extension://extensionID/img/myImage.png
I have the above code running in both a popup page and content script.
However when I upload to the Chrome Web Store and publish the packed version, I'm unable to access the resource because it is trying to look for it at
chrome-extension://extensionID/chrome-extension://extensionID/img/myImage.png
Popup page error
Failed to load resource: net::ERR_FILE_NOT_FOUND
Content Script error
Denying load of chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/img/myimage.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Manifest File -
{
"manifest_version": 2,
"name": "Feed the Goat",
"description": "Feed the Goat provides a fun way for you to stay focused so you can get more done.",
"version": "1.5",
"icons": { "16": "img/goat-icon16.png",
"32": "img/goat-icon32.png",
"128": "img/goat-icon128.png" },
"background": {
"scripts": ["event/background.js"]
},
"browser_action": {
"default_icon": "img/goat-icon.png",
"default_popup": "popup/authentication/authentication.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content/content.js"]
}
],
"web_accessible_resources": [
"img/goat-icon128.png",
"img/goat-icon256.png",
"img/GarytheGoat-icon128.png",
"img/GarytheGoat-icon256.png",
"img/BillyBuck-icon128.png",
"img/BillyBuck-icon256.png",
"img/UncleUnicorn-icon128.png",
"img/UncleUnicorn-icon256.png"
],
"content_security_policy":"script-src 'self' https://cdnjs.cloudflare.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com https://use.fontawesome.com; object-src 'self'",
"permissions": [
"tabs",
"activeTab",
"<all_urls>",
"identity",
"idle",
"notifications",
"storage"
],
}
Thanks
In your manifest.json try to add following:
"web_accessible_resources": [
"img/*"
]
Also, make sure that in your dist(build) folder there is img folder with images.
"goatPath" should be img/myImage.png
and funnction should have all upper-case for URL like this
chrome.runtime.getURL(goatPath)
I've enabled "chrome://flags/#extensions-on-chrome-urls" which should allow me to create extensions that can run on chrome:// sites. When I try to unpack my extension, however, it fails with the error message: "Invalid value for 'content_scripts[0].matches[0]': Invalid scheme." I don't believe my script.js is a problem since the unpacking doesn't fail when I replace the "chrome://extensions" part with an http or https sites. Any help would be greatly appreciated, does anyone know a fix?
manifest.json:
{
"name": "Does something on chrome://extensions",
"version": "1.2",
"description": "Read the name",
"manifest_version": 2,
"browser_action": {
"default_title": "Ext",
"default_popup": "popup.html"
},
"content_scripts": [ {
"matches": ["chrome://extensions"],
"js": ["script.js"]
} ]
}
Note: This is an undocumented feature and may fail without warning in the future.
chrome://extensions is an invalid match pattern. You cannot omit the path component, so at the very least you should use "chrome://extensions/*".
This does however not work either, because the actual URL is chrome://chrome/extensions. Or, if you are specifically interested in the page that shows the list of extensions, chrome://extensions-frame.
To run a content script at the extensions page, use --extensions-on-chrome-urls and:
"content_scripts": [{
"matches": ["chrome://chrome/extensions*"],
"js": ["script.js"]
}]
or (the frame that lists all extensions, i.e. what you see when you visit chrome://extensions):
"content_scripts": [{
"matches": ["chrome://extensions-frame/*"],
"all_frames": true,
"js": ["script.js"]
}]
I am working with a chrome extension . I want to inject js script in all tab. I am using this manifest.json :
{
"name": "ABC",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"src/background/background.min.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icons/128.png",
"default_title": "ABC",
"default_popup": "src/browser_action/index.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"<all_urls>"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["./src/inject/inject.min.js"],
"css": ["./css/inject.min.css"],
"all_frames": true
}]
}
And my inject.js is like this :
(function() {
console.log("Hello");
});
I am getting all log from all tab except the tab of the chrome setting (eg : chrome://extensions/:id , chrome://history etc).
Am I missing something in manifest.json or chrome disables the feature of injection in settings page ?
Thanks in advance.
Indeed, you can't inject code into chrome:// pages. They contain control elements / code that can modify the browser in ways that an extension is not allowed to.
Chrome resolves this by simply not allowing permissions to be set for chrome:// URLs, and <all_urls> does not include it.
However, you could use Override Pages to replace some of them (well, History page at least) completely.
I want to create a new chrome extension but it don't work.
I want to inject a js file into web page (all web page,not only one.If i push the chrome icon on google the script must execute,if i push the icon on facebook it must execute ect.)
this is background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
null,{file: "backgrounds.js"} });
});
this is backgrounds.js
document.body.innerHTML="display div elem with style and id";
this is manifest.json
{
"name": "MyExt",
"description": "an extension,what else?",
"version": "1.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["background.js"]
}
],
"browser_action": {
"default_title": "myExt"
},
"manifest_version": 2
}
what i wrong?
I'm on windows 8.1 Update 1 with chrome last version
Your manifest is wrong: you should set background.js as your background script:
"background" : { "scripts" : [ "background.js" ] },
and remove the "content_scripts" section.
The "activeTab" permission means that you don't need to specify host permissions to inject in the current tab upon browser action click, so no other permissions are needed.
The tabId argument is optional, you can just drop it instead of passing null. And your invocation is wrong (you're wrapping two arguments in a single object). Here's the correct way:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({file: "backgrounds.js"});
});