i am developing extension for google chrome. i am trying to load css file.if the css file is in root directory of extension then it loaded fine. but if i put css in /css folder then try to load css then it gives error could not load javascript for contentscript
{
"name": "test",
"version": "1.0",
"manifest_version": 2,
"description": "This is test",
"background":{"scripts":["background.js"]},
"permissions":
[
"http://*/*",
"https://*/*",
"file://*"
],
"content_scripts":
[
{
"matches":["*://mail.google.com/*"],
"css":["mystyle.css", "default.css","style.css"],
"js":["jquery.js","myscript.js","DOMAlert.js","css/core.js"]
}
]
}
i am new at developing extension so please help what's wrong.
I seem to be having the same issue. I managed to achieve this when I added a script that is external to my plugin. Check all of your js scripts to have exact spelling and case. It only complains about javascript if there is a permissions issue or the file does not exist.
Related
I have a very simple chrome extension which basically add some text to specific pages, is working fine, but only on first loading and when i refresh the page.
The page have originally some real time filtering which update the results and the url, but because don't refresh the page, my script doesn't work.
I try to fix it using the background feature but maybe there are some simple thing i can do to force execute the script when the is some change on the page.
This is the current content of the manifest.json
{
"manifest_version": 2,
"name": "Extension name",
"version": "0.1.0",
"description": "Extension description",
"content_scripts": [
{
"js": ["contentList.js"],
"matches": ["https://www.test.com/*"]
}
]
}
I developped a Google Docs add-on with translations, so, instead of using the traditional online deployment process, I need to upload a ZIP file with a json manifest (example below) and files for each locales.
{
"manifest_version": 2,
"name": "__MSG_application_title__",
"short_name": "__MSG_application_title__",
"description": "__MSG_application_description__",
"container": ["GOOGLE_DOCUMENT"],
"default_locale": "en",
"icons": {
"16": "icon.png",
"128": "icon.png"
},
"container_info": {
"container_version": "my_container_version",
"post_install_tip": "my_tip",
"container_id": "my_container_id"
},
"version": "my_version"
}
When uploading such ZIP file, I get the following error message:
An error occurred: Failed to process your item. Please specify
background subsection of app section in the manifest. Legacy packaged
apps cannot be uploaded to the Chrome Web Store any more. More
information can be found at
http://blog.chromium.org/2014/06/migrate-your-legacy-packaged-apps-to.html
I tried to add background subsection from different ways, but none of them was working. Does anyone know how to change the manifest to make it valid please ?
Thanks
Sincerest apologies, I was misunderstanding the issue entirely. Try and see if:
"app":{
"background":{
"scripts":["background.js"]
}
},
Works when added to your code.
similarly, I had to change the app section of my manifest to the following to get it to work when facing this issue:
"app": {
"background": {
"persistent": false
}
}
I'm having a problem controlling what pages my content scripts are injected into. The chrome extension developer guide specifies that I can use an "exclude_matches" directive in my manifest.json to exclude certain pages from injection.
However, this doesn't seem to have any effect. My content script still executes on pages that I have specified as ignored.
I have put the steps to reproduce in a Gist. The code is also available on Github.
Any ideas what I'm doing wrong?
manifest.json
{
"name": "Testing Extension",
"version": "1.0",
"description": "Test the chrome extensions exclude_matches.",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": ["http://news.ycombinator.com/"],
"js": ["content.js"]
}]
}
content.js
console.log("hello from the content script");
This is Bug #100106. exclude_matches do not function properly.
To solve the problem, use exclude_globs instead of exclude_matches.
Also, your exclude_matches rule does only match http://news.ycombinator.com/.
Suffice the pattern with an asterisk to match the whole site: http://news.ycombinator.com/*.
See also: Match patterns.
I'm trying to write a simple Chrome extension. I learnt how to write the "hello world" extension that Google put out, but how do I write an extension that will actually do something? Nothing online seems to explain it well. I know it involves HTML and CSS(? ), but what do I do? Say I want to write an extension that will enlarge everything--do I write an HTML file that does this and stick it in my extension folder? And what do I write in the manifest.json file so that it actually uses the HTML file?
Also, I'm a total beginner (I don't know HTML, all I know is a bit of Java) if you couldn't tell from the basic-ness of my questions.
In order to interact with the DOM of the site the user is viewing once the extension is installed you need to use content scripts. Look at the added lines in the manifest here:
http://code.google.com/chrome/extensions/content_scripts.html
Those lines let you indicate what js and css you want to use for the site and also specify what specific domains with 'matches':
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
Files needed:
icon.png ( http://www.mediafire.com/imageview.php?quickkey=37phkkdmd1dv1zf&thumb=4 )
manifest.json
popup.html
Put all in a folder together.
.
in the manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
put in popup.html:
hello world
Save both files.
go to extentions ( chrome://extensions/ )
And click developer mode. http://snpr.cm/HBuhYF.jpg
Click "load unpacked extention". and locate the folder.
It should load fine.
Click on the new extention and see the glory :)
edit, just read your post - you learned a hello world /facepalm
I'm developing a google chrome extension and I'm running into a relative path problem.
If I give a relative path to an image and open the plugin in a certain page it will look for that image in the website's path rather than the extension's.
Any ideas?
If you're using CSS in your extension pages (background, popup, infobar, etc) then you can use relative paths with a slash (/):
background-image:url("/sprites.png");
The above should work, everyone uses it. But, if your using it for content scripts and you can do the same for any css, you would need to use the predefined message like:
background-image:url('chrome-extension://__MSG_##extension_id__/sprites.png');
If you want to programmatically set it, you can use the chrome.extension.getURL syntax as following:
var url = chrome.extension.getURL('sprites.png');
These are the ways that you can refer to a specific url/image.
In addition, as mentioned in this answer, if you place your image assets in a directory, these files are not accessible in the web page DOM automatically. The developer should specify the resources that can be loaded the page by using the "web_accessible_resources" setting in the manifest.json file:
#mohamed's answer worked for me but it took my a while to put it all together. I've answered this else where but here is the solution that worked for me.
My solution.
With Menifest v2 you need to add web_accessible_resources to the file and then use chrome-extension://__MSG_##extension_id__/images/pattern.png as the url in your css file.
CSS:
#selector {
background: #fff url('chrome-extension://__MSG_##extension_id__/images/pattern.png');
}
Manifest.json
{
"manifest_version": 2,
"name": "My Extension Name",
"description": "My Description",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://mydomain.com/*"],
"css": ["style.css"]
}
],
"permissions": [
"https://mydomain.com/"
],
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "My Extension Name"
},
"web_accessible_resources": [
"images/pattern.png"
]
}
p.s. Your manifest.json might look different to this one.
In some cases you might even use inline base64 encoding of the image. For example,
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />
Same you can apply to your CSS. You can find image encoders all over the web.