Hi I want to create a very simple extension for Chrome, that will create a bookmark with a single click to a default folder. So I created an extension using this service:
http://sandbox.self.li/bookmarklet-to-extension/
Now, I have this json.manifest file
{
"background": {"scripts": ["background.js"]},
"browser_action": {
"default_icon": "icon-128.png",
"default_title": "1ClickBookmark"
},
"name": "1ClickBookmark",
"description": " - Created with http://blog.self.li",
"homepage_url": "http://blog.self.li/post/16366939413/how-to-convert-bookmarklet-to-chrome-extension",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"bookmarks",
"http://*/*",
"https://*/*"
],
"version": "0.1",
"manifest_version": 2
}
where I added "bookmarks to permission"
and the javascript file:
(function(){
chrome.bookmarks.create({
'parentId': null,
'title': 'AAAAAAA',
'url': 'http://www.google.com/'});
alert("Bookmark added!");
})();
ParentId=null points to the root of "Other Bookmarks", that is fine.
The problem is that in Console I catch an exception:
"Cannot call method 'create' of undefined" for chrome.bookmarks.create
However, if I run just that script directly in the Background console it works just fine.
In Background console - work, in standard console - fails.
Why?
Any advice would be appreciated. Thanks
If you want your script to run in the context of other pages you must use content scripts. As it stands, your extension is only "running" on the background page. So your background page has access to the chrome.* object, but other pages will not until they are injected with a content script.
Have you tried to reinstall your extension after adding permission to manifest.json?
Related
I started building chrome extensions. Initially I started with a simple extension which prints the hello in background console. How can I print that in the active window console.
This is my manifest.json file
{
"manifest_version": 2,
"name": "example",
"version": "0.1",
"description": "My Chrome Extension",
"icons": {
},
"background": {
"scripts": ["js/background.js"]
},
"browser_action": {
"default_title": "My test Environment"
},
"permissions": [
"background",
"storage",
"tabs",
"http://*/*",
"https://*/*"
]
}
This is the content of my background.js file
a simple
console.log("hello");
Take a look at Content Script, you could use manifest.json injection or Programming injection to ensure your code run in the context of current webpage.
The former requires Message Passing or Storage to ensure communications between content script with background page;
while as for the latter, Try the following code in background.js
chrome.tabs.executeScript({code: "console.log('hello');"});
Hopefully this is something simple. I'm testing a simple Chrome Extension script and it appears it'll execute part of the script, but won't complete it. For example, if I add an alert() to the beginning of a script, it will execute the alert. But if I place it after anything calling the chrome DOM object, it won't execute. Here's an example:
Will execute alert
alert("Test");
chrome.webRequest.onCompleted.addListener(function (request) { });
Will not execute alert
chrome.webRequest.onCompleted.addListener(function (request) { });
alert("Test");
Am I missing something?
Here is my manifest:
{
"background": {
"persistent": true,
"scripts": [
"scripts/libs/jquery.1.11.2.min.js",
"scripts/background.js"
]
},
"browser_action": {
"default_icon": "resources/icon.19.png"
},
"icons": {
"48": "resources/icon.48.png"
},
"manifest_version": 2,
"name": "Test",
"permissions": [
"<all_urls>",
"webNavigation",
"webRequest",
"webRequestBlocking"
],
"version": "1.0"
}
You are missing debugging it yourself.
Go to chrome://extensions/ and load the Dev Tools for your background page. You will see an uncaught exception that stops execution.
For webRequest events, you must include a filter argument to the addListener function.
I'm starting to learn to make my own Chrome Extensions, and starting small.
At the moment, I'm switching from using the alert() function to console.log() for a cleaner development environment.
For some reason, console.log() is not displaying in my chrome console logs. However, the alert() function is working just fine.
Can someone review my code below and perhaps tell me why console.log() isn't firing as expected?
manifest.json
{
"manifest_version": 2,
"name": "Sandbox",
"version": "0.2",
"description": "My Chrome Extension Playground",
"icons": {
"16": "imgs/16x16.png",
"24": "imgs/24x24.png",
"32": "imgs/32x32.png",
"48": "imgs/48x48.png"
},
"background": {
"scripts": ["js/background.js"]
},
"browser_action": {
"default_title": "My Fun Sandbox Environment",
"default_icon": "imgs/16x16.png"
},
"permissions": [
"background",
"storage",
"tabs",
"http://*/*",
"https://*/*"
]
}
js/background.js
function click(e) {
alert("this alert certainly shows");
console.log("But this does not");
}
// Fire a function, when icon is clicked
chrome.browserAction.onClicked.addListener(click);
As you can see, I kept it very simple. Just the manifest.json and a background.js file with an event listener, if the icon in the toolbar is clicked.
As I mentioned, the alert() is popping up nicely, while the console.log() appears to be ignored.
Try to open the "_generated_background_page.html" in extension page (chrome://extensions/)
i am facing an odd problem when i try to publish my chrome extension via the web store. Every time i upload the zip file i get this error:
An error has occurred: Can not contain the access permissions to the file.
I even tried to upload a zip file that contains only the manifest file but i am still having the same error.
Any idea ?
Thanks
Manifest file :
{
"name": "__MSG_plugin_name__",
"version": "0.0.0.1",
"manifest_version": 2,
"description": "__MSG_plugin_description__",
"browser_action": {
"default_icon": "images/ST_19.png",
"default_title": "__MSG_plugin_title__",
"default_popup": "popup.html"
},
"icons":{
"16": "images/ST_16.png",
"48": "images/ST_48_1.png",
"128": "images/ST_128.png"
},
"default_locale": "en",
"permissions": [
"contextMenus",
"tabs", "http://*/*", "file:///*","https://*/*", "ftp://*/*"
],
"background": {
"persistent": false,
"scripts": ["scripts/jquery.min.js","scripts/utils.js", "scripts/menus.js","scripts/logic.js"]
}
}
So i isolated the thing: ""file:///*"" was wrong and since i want the extension to run on any opened url, i used "" as a permission.
Change in the manifest file is :
"permissions": [
"contextMenus",
"tabs", "<all_urls>"
]
Thanks everybody
Yes, ndongo is correct and Chrome is complaining that it does not have a domain or path (just like the other protocols).
The way you must write your URLs must be protocol://domain/path (note you can use * or ?)
So you can replace "file:///*" with "file:///*/*" or use "<all_urls>"
made my first chorme ext. and it works fine on old comp.
now with new one try to load unpacked ext. and it don't works at all. i see my ext popup ad bg.html but content script didn't loads at all, neiter images that shold be on target page.
other unpacked ext works fine. but mine refuse works( help me please!
manifest.json:
{
"background_page": "bg.html",
"name": "lardi trans",
"version": "1.0",
"icons": {
"48": "icon_48.png"
},
"browser_action": {
"default_icon": "icon_48.png",
"default_title": "Lardi Trans",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"notifications",
"http://lardi-trans.com/gruz/*",
"http://lardi-trans.com/trans/*",
"unlimitedStorage"
],
"content_scripts": [{
"matches": [
"http://lardi-trans.com/gruz/*",
"http://lardi-trans.com/trans/*"
],
"css": ["extent_styles.css"],
"js": ["jq.js", "script.js"],
"run_at": "document_end"
}]
}
screenshots of page where ext should be i mark place where must appears my form
console shot
and other ext scripts loads like this ! screenshot2 (5 times same script? WTF??) but anyway i can't see my ext script.js (why it din't loads?)
You do not have to give the link of css to manifest.json file. Just, call it in bg.html
My manifest.json file
{
"name": "Example",
"version": "2.0",
"description": "Example.com Description",
"icons": { "16":"Images/Example/16x16.png", "32":"Images/Example/32x32.png", "48": "Images/Example/48x48.png", "64": "Images/Example/64x64.png", "128": "Images/Example/128x128.png" },
"app":
{
"default_icon": "../Images/Example/icon.png",
"launch":
{
"local_path": "Pages/Index.html"
}
},
"permissions": [ "http://www.Example.com/",
"http://*.Example.com/",
"https://www.Example.com/",
"https://*.Example.com/",
"unlimitedStorage",
"tabs",
"notifications"
],
"options_page": "Pages/Options.html",
"background_page": "Pages/Background.html"
}
If that answer helped you, please mark it as an answer...
If you are still taking errors, please ask them to bottom of that answer.
Best Regards.
EDIT:
View errors - Steps;
Click your extension button to open it.
Open the debug window in Google Chrome with F12 key.
Click "Console" tab page.
Take a screenshot of it, and post the picture in your question.
With that way everybody can help you =)
EDIT 2:
ok your question seems looking littlebit different now.
Here is algorithm;
Download the site sourcecode of target webpage with jquery,
Insert your css line in head tag with json,
Store new source code in localStorage( html5 )
When it's done, refresh the page with js, and read new source code from localStorage
And show it in html.
if anyone interests, problem solved, by some reason in manifest add unprop whitespases "content_scripts": [{
"matches": ["http://lardi-trans.com/gruz/*","http://lardi-trans.com/trans/*"],
this works!))