I am learning how to extend Google chrome and I have run into the following problem:
I have the following manifest file:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"background_page": "background.html",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
My background.html file just injects some simple JavaScript into the page:
<script>
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {code:"alert(\"hi from background CODE\");"});
});
</script>
My popup.html file is just simple HTML:
<body>
Sup Playa
</body>
The dialog box from background.html never gets displayed. popup.html functions as expected.
However when I comment out popup.html from the manifest file, the script in background.html works.
What am I doing wrong? Why aren't both the dialog box and the popup showing up?
As it says in the docs:
onClicked event will not fire if the browser action has a popup.
So if you assign any html file to your popup "popup": "popup.html" (rather than just a button without body), onClicked event isn't fired.
You can just put your code right into popup.html (it has same privileges as a background page) if you want something to be executed each time it is opened:
chrome.tabs.executeScript(null, {code:"alert(\"hi from background CODE\");"});
Related
As per permissions documentation, if we have activeTab perimissions, we need not specify the URL based permissions
Any of the following URLs match all hosts:
http://*/*
https://*/*
*://*/*
<all_urls>
Note that you may be able to avoid declaring all host permissions
using the activeTab permission.
But this is working only once, second time getting error (extension UI is open while we try second time), if we launch the popup again by clicking extension icon it works fine.
Unchecked runtime.lastError while running tabs.executeScript:
Cannot access contents of the page.
Extension manifest must request permission to access the respective host.
Following are details
manifest.json
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This is hello world example",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
popup.html
<html>
<head>
<title>Getting Started Extension's Popup</title>
<script src="popup.js"></script>
</head>
<body>
<div>Hello World!</div>
<input type="button" id="refreshPage" value="Refresh Page"/>
</body>
</html>
popup.js
document.addEventListener('DOMContentLoaded', function() {
function refreshPage() {
chrome.tabs.executeScript(null, {
code: 'window.location.reload(true)'
}, function(){
console.log("Page refershed");
});
}
document.getElementById("refreshPage").addEventListener("click", refreshPage);
});
If we add "*://localhost/*" (this works for localhost), there is another way to specify for all hosts *://*/* (not sure if this is right and secure way), refresh button is working multiple times without relaunching popup UI. Is there a difference between activeTab vs URL based permissions and any specific way is recommended over another due to specific reasons?
The activeTab gives permission temporarily until the tab is navigated or closed. My guess is that by reloading the tab when hitting refresh revokes the activeTab permissions. Avoid using window.location.reload or specify the url match for the domain you are trying to execute a script on.
https://developer.chrome.com/extensions/activeTab
The activeTab permission gives an extension temporary access to the
currently active tab when the user invokes the extension - for example
by clicking its browser action. Access to the tab lasts until the tab
is navigated or closed.
I am working on to develop extensions using crossrider . I have added popup.html file to resources of my extension , but how to link it to onclick event of a browser button .I have been trying with appAPI.tabs.create('popup.html') to atleast open the popup file in a new tab but it doesn't work
There is no need for explicit linking of popup.html to onclick event of browser button if you have registered manifest as below.
{
"name": "My extension",
...
"browser_action": {
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // This registers to onclick event of browser icon
},
...
}
References:
Browser action
Let me know if you need more information.
I am writing an extension and have this call in my background page:
chrome.webRequest.onBeforeRequest.addListener(function(details) {console.log(details)}, {urls: ["<all_urls>"]}, ["blocking"]);
However whenever I run it I get this error in the dev tools for the background page:
Error during webRequestInternal.addEventListener: You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest.
Even though my permissions in my manifest look like so:
"permissions": [
"cookies",
"http://*/*",
"https://*/*",
"tabs",
"history",
"webRequest",
"webRequestBlocking"
]
What the heck is going on here? Here's the web request docs http://developer.chrome.com/stable/extensions/webRequest.html.
Works good for me with following code, why do you want to do it in a background page in specific?
Screen Shot
Manifest.json
{
"name":"My First App",
"description":"This is First App",
"version":"1",
"manifest_version":2,
"permissions": [
"cookies",
"http://*/*",
"https://*/*",
"tabs",
"history",
"webRequest",
"webRequestBlocking"
],
"icons":{"16":"icon.jpg"},
"background":{
"scripts": ["background.js"]
},
"browser_action":{
"default_popup":"popup.html",
"default_icon":"icon.jpg"
}
}
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
chrome.webRequest.onBeforeRequest.addListener(function(details) {
console.log(details);
}, {urls: ["<all_urls>"]}, ["blocking"]);
Background.js
function doNothing(){
}
I had a similar problem when I was writing my first Chrome extension:
My solution was to remove the extension, fix the manifest.json and add the extension again. Just deactivating it and re-activating it won't do the trick.
I loaded the extension into Chrome and started to debug. When I found an error in the code, I deactivated the extension, fixed the bug an activated the extension again. This worked fine to fix code errors. But when I tried to use the webrequest module in a blocking fashion I always got "Error during webRequestInternal.addEventListener: You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest.". No matter how I changed the manifest.json.
Going to manifest version 2 instead of 3 fixed this issue for me.
I am making a Chrome app that has the user open a new page when the user clicks on the app in the top-right corner. I am trying to have Chrome open a new page when the app loads.
Here is my manifest.json file:
{
"name": "My App That Opens in a New Page",
"version": "1.0",
"manifest_version": 2,
"icons": { "128": "mediumIcon.png" },
"description": "A practice text editor that opens in a new tab or window.",
"browser_action": {
"default_icon": "smallIcon.png",
"default_popup": "load.html"
}
}
Subsequently, in load.html, I have tried this HTML to open a new page per the instructions at http://developer.chrome.com/extensions/overview.html.
<!DOCTYPE html><html><head>
<script type='text/javascript'>window.open('editor.html');</script>
</head><body></body></html>
However, editor.html is not opening when I click on the icon for my app in Chrome. Why not? Doesn't window.open open new windows in javascript? Does it behave differently for javascript embedded in the browser?
I have a chrome extension that has a reference to the jquery file.
this is my popup html (only the head tag):
<head>
<title>My Extention</title>
<script type="text/javascript" src="http://www.MySite.com/Resources/JS/JQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="MyExtensionScript.js"></script>
</head>
so in "MyExtensionScript.js" i thought i could use jquery but apparently the $ function is not defined.
This is my manifest.json file:
{
"name": "My Test Extension",
"version": "1.0",
"manifest_version": 2,
"description": "Test version of My Extension",
"browser_action": {
"default_icon": "test.ico",
"default_popup": "Test.html"
},
"permissions": [
"cookies",
"tabs",
"<all_urls>"
]
}
in version 1 of the manifest it worked, but now it doesn't. I tried to use the "web_accessible_resources" and add to them "http://www.MySite.com/Resources/JS/JQuery/jquery-1.7.2.min.js" but that didn't work also. any ideas?
also, i have a script injected to the current page and returning me a message (in my case some html source of the current page), will this behavior be affected by the transition to manifest version 2?
Thanks all :)
EDIT: I have a web application that enables cross domain scripting (using JSONP). In my extension i had a script calling a web service in my site with $.getJSON. now it doesn't work. i'm pretty sure that it has to do with the new manifest version but how can i enable again the cross domain scripting?
You need to use a jQuery file stored locally in your extension, rather than referenced from your site.
This is due to Chrome's strict Content Security Policy that only allows local scripts to be executed, with no inline code.
Web Accessible Resources are files inside your extension that may be accessed from the web, rather that resources your extension can access that are on the web. For example, if you wanted to change the background image of a page using an image stored in the extension, you have to add that image to the list in web_accessible_resouces in your manifest.
The change of manifest version should not affect your content scripts, unless they do something that is no longer allowed. You can see what else has changed from the Chrome manifestVersion docs.
I just include jquery in my content scripts. just make sure to load it before your script.
{
"manifest_version": 2,
"default_title": "Babble",
"version": "1.2",
"description": "Chat in your language with friends in their language",
"default_locale": "en",
"default_icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"content_scripts":[
{
"matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
"css" : ["css/style.css"],
"js" : ["js/jquery.js" , "js/translate.js" , "js/jquery.cookie.js"]
}
]
}