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?
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 want open all the links on a web page with a single click on Chrome Extensions. I try for that وbut I did not get any results. please help me ...
my manifist.json file :
{
"name": "Open Links in New Tabs",
"version": "1.0",
"description": "open all link in page on new tabs with one click",
"background_page" : "background.html",
"browser_action": {
"default_icon": "icon.png"
},
"permissions":
["tabs"],
"manifest_version": 2
}
background.html file :
<!doctype html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
</body>
</html>
background.js file :
for(i = 0; i < document.links.length; i++)
{ chrome.tabs.create({active: true, url: document.links[i].href});}
Please explain any problems. thanks
When you access the document object in background.js, you're looking at background page, not the currently active tab.
To access the DOM contents of the open page, you will need a content script. It can then send a message to the background script (which has access to chrome.tabs) with the list of links to open.
Please take a moment to read this excellent overview of extension architecture. Also, read on messaging to pass the list.
Actually, if you're going to be injecting the script programmatically via chrome.tabs.executeScript, you can ditch messaging and just use the callback of executeScript.
As a side note, since you don't have any HTML in the background page, you can replace it with an auto-generated script page like this:
manifest.json
"background": {
scripts": ["background.js"]
},
in place of "background_page"
Lastly, consider minimal permissions that you need.
If your extension is supposed to trigger on click on the extension button (wrapped in a chrome.browserAction.onClicked listener), you can inject a script "for free" with activeTab permission, no need for tabs/host pemission.
Same goes to chrome.tabs.create, you don't need the mighty and scary "tabs" permission.
There are quite a few.
A background script doesn't have access to the page DOM of a tab. The only DOM it can access directly is the DOM of the background.html. You should use a content script and message passing.
background_page is an option of Manifest Version 1, you are using Manifest Version 2, for which the option is called background. Usually you provide the background.js directly as a script (see https://developer.chrome.com/extensions/background_pages). You should return after you implemented those suggestions
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 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"]
}
]
}
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\");"});