I have a simple chrome extension which displays a little icon in Google Chrome. On click, it loads a search page of my site, which in term redirects you to the right page.
https://chrome.google.com/webstore/detail/w3patrol-watch-over-any-w/addcgpijdjacmndaadfgcpbfinagiplm is the extension.
Now, Google is forcing me to update to manifest version 2, instead of 1. But this is breaking my working extension.
In manifest.json I have added manifest_version 2, but since then the icon does not work anymore when I click on it.
{
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon19.png",
"default_title": "__MSG_default_title__"
},
"default_locale": "en",
"description": "__MSG_description__",
"icons": {
"128": "icon128.png",
"19": "icon19.png",
"48": "icon48.png"
},
"name": "__MSG_name__",
"permissions": [ "tabs", "http://*.w3patrol.com/" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "1.0",
"manifest_version": 2
}
This is background.html
<script type="text/javascript">
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
</script>
What do I need to add/change to get it working with manifest version 2?
You just need to remove the script tag from your background page. Here's how background.js(instead of background.html) should look like:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
And remove the 'page' property in background. Add 'scripts' property:
"background": {
"scripts": ["background.js"]
},
Related
I'm currently developing a Chrome extension but my it doesn't seem to be able to execute any Javascript.
$(document).ready(function () {
$("#overlay").hide();
});
In this example I'm trying to hide a div with id "overlay" but it doesn't seem to be working. Stored in an external file (popup.js)
Manifest:
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"description": "",
"offline_enabled": true,
"background": {
"scripts": [
"js/background.js"
]
},
"icons": { "16": "android-16.png",
"48": "android-48.png",
"128": "android-128.png"
},
"browser_action": {
"default_icon" : "android-128.png",
"default_title": "",
"default_popup": "index.html"
},
"permissions": [
"background", "unlimitedStorage", "tabs"
],
"web_accessible_resources": [
"index.html","js/popup.js"
]
}
HTML links situated before body closing tags:
<script src="js/background.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/popup.js"></script>
Just as #Xan mentioned due to the CSP will block the script the best way to avoid this and do it work is downloading jquery.js and make it part of your extension.
I am adding this listener in background.js file which is a background script
chrome.tabs.onActivated.addListener( function(info) {
chrome.tabs.get(info.tabId, function(tab) {
chrome.tabs.reload();
});
});
But in the chrome object tabs are not there.
The manifest file is
{
"name": "Tab Logger",
"description": "Logs the clicked tabs with time",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
"tabs"
],
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
Can anybody tell me what am I doing wrong?
chrome.tabs API is not listed as supported for Apps, and your manifest is for an app and not an extension.
You will need to either make an extension, or not use tabs API.
To convert your manifest to an extension simply change
"app": {
"background": {
"scripts": ["background.js"]
}
},
into
"background": {
"scripts": ["background.js"]
},
I am trying to add Jquery to my chrome extension ,
here is my manifest.json
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["background.js"]
},
"js": ["js/jquery-1.10.2.min.js"]
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"],
"web_accessible_resources": [
"img/bt.png"
"js/jquery-1.10.2.min.js"
]
}
Problem is it is giving ,
Uncaught ReferenceError: $ is not defined
Apparently, your extension uses primarily background page and that is the place where you need jQuery. In this case, you can simply add jQuery JavaScript file in the list of background scripts:
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["js/jquery-1.10.2.min.js", "background.js"]
},
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"]
}
REMEMBER TO PUT JQUERY SCRIPT BEFORE YOUR ACTUAL BACKGROUND SCRIPT!
Here's a simple example. Let's say you have an extension that makes Ajax request from its background page to its local html file and print the response to the console.
manifest.json:
{
"name": "Local Request",
"description": "Send Ajax request using jQuery",
"version": "2.0",
"background": {
"scripts": ["js/jquery-1.10.2.min.js", "background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Send Request"
},
"manifest_version": 2
}
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
$.get("ajax/test.html", function(data) {
console.log(data);
});
});
Do the same steps to use jQuery in your content script. Here's an example of doing that in official documentation: http://developer.chrome.com/extensions/content_scripts.html ("js": ["jquery.js", "myscript.js"]).
I would like my Chrome Extension to on show up on google and amazon. My manifest.json looks like this:
{
"background": {"scripts": ["background.js"]},
"content_scripts": [
{
"matches": ["*://*.google.com/*", "http://www.amazon.com/*", "*://*.amazon.com/*"],
"js": ["background.js"]
}
],
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
But it doesn't show up on either google or amazon and I can't figure out why.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
And here is the bookmarlet.js
setTimeout('x99.focus()', 300);
var re = /([\/-]|at[at]n=)/i;
if (re.test(location.href) == true) {
var isbn = RegExp.$2;
var x99 = window.open('http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=' + atatn, 'Library', 'scrollbars=1,resizable=1,top=0,left=0,location=1,width=800,height=600');
x99.focus();
}
Any ideas? Thanks for your help.
Many mistakes in the code.
You don't need content script here, all operations could be executed
within background page content
It it hard to make background page
code works within content script, this is definitely not a your case.
So using the same background.js as both background and content script
does not work in your case at least
Manifest does not declare browser
action.
And so on
I strongly suggest to start with Google extension documentation. You will save a lot of your time.
How I think files might look like
manifest.json
{
"background": {"scripts": ["background.js"]},
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Do Staff" // optional; shown in tooltip
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// You need more sothisticated regexp here which checks for amazon and google domains
var re = /([\/-]|at[at]n=)/i;
if (re.test(tab.url)) {
var isbn = RegExp.$2;
var url = "http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=" + isbn;
chrome.windows.create({
url : url,
left: 0,
top: 0,
width: 800,
height: 600,
focused: true,
type: "popup"
});
}
});
bookmarlet.js is not needed
So I'm trying to make an extension that on click opens a tab and goes to a page. The only thing I can make it do so far is open a tab and give me this error:
No webpage was found for the web address:
chrome-extension://hgjkkhjinhilcehaaldcnopaefinlfif/https://www.google.com/
Here is the manifest.json:
{
"name": "New App",
"version": "0.1",
"permissions": ["tabs"],
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"icons": {
"48": "icon.png"
}
}
Here is background.js
chrome.browserAction.onClicked.addListener
(function(tab)
{chrome.tabs.create({'url': chrome.extension.getURL('https://www.google.com/')}, function(tab) {})
}
)
What I was trying to do was open a new tab and go to a website in the browser action. Here is the answer:
Manifest.json
{ "name": "Funny Pictures",
"version": "0.1",
"manifest_version": 2,
"description": "Rick Roll all your friends!",
"browser_action": {
"default_icon": "funnyface.png"
},
"icons": {
"48": "funnyface.png"
},
"background":{
"scripts": ["background.js"]
}
}
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create({ url: newURL });
});
I swear I tried this previously, but that's how it goes I guess.