Basically I'm trying to do a little chrome extension following Google documentation. I'd like to inject a script every time the extension button is clicked.
This is my manifest so far:
{
"name": "Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs"
],
"description": "My Chrome extension.",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
}
}
And this is my background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {code: "content_script.js"});
});
The problem is that the content_script is not fired, even trying with such a simple alert("aaa");
Can you please tell me what I'm doing wrong? I can't figure it out.
In order to execute a content script on a page, you must request the correct host permissions in your manifest file.
Since you want to insert a content script on click of a browser action button, it suffices to request the activeTab permission. Furthermore, you can drop the tabs permission, to reduce the number of permission warnings to zero!
{
"name": "Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
}
}
(The activeTab permission has been introduced in Chrome 26. If you need to support Chrome 25 and earlier, add the *://*/* or <all_urls> permissions to the manifest file).
Note: If you add a callback to chrome.tabs.executeScript, you would have received a useful error message in chrome.runtime.lastError.message:
Cannot access contents of url "http....." Extension manifest must request permission to access this host.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {
file: "content_script.js"
}, function() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
});
In addition to Rob's fix you should be using {file: "content_script.js"}
Related
I am making chrome extension. This is a program that checks whether a particular site is right by comparing the URL when you access Google.
The thing I want to do is compare URLs and send an alert when I connect.
However, it does not take effect until you click the chrome extension program. Please let me know the event you need.
main.js
chrome.tabs.executeScript({
code: 'document.URL;'
}, function (domain) {
var google = 'https://www.google.co.kr/';
if(domain == google){
alert('is google')
}
else
alert('not google')
})
manifest.json
{
"manifest_version": 2,
"name": "site detect",
"description": "site",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
Well, this code was working and now, not anymore, WHY? I'm just trying to inject code via content script. (base code)
manifest.json
{
"name": "Test",
"permissions": [
"activeTab"
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": [
"bower_components/jquery/dist/jquery.min.js",
]
}],
"browser_action": {
"default_icon": {
"19": "icon_19.png"
}
},
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {
file: "content_script.js"
});
});
I can suppose it's a permission bug. But, what should I add for this work ?
You have to add to your permissions the url of the page wich you want to inject your code.
If I well understand, you want to inject the code in the active tab, so you can use the activeTab permission that temporally give permission to your extension for the curent tab when the user invokes your extension (by clicking the browser action for example). You can read more about it here.
I have made an extension to my website.It navigates to my home page which is my login page.When the user log on to my site,the extension icon must appear green and when user log out, the icon should appear red. Please someone help me. I have been trying these two days, but I am not getting how to do it.
Here is my manifest.json file:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Here is my background.js file:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://www.example.com"});
});
Here is my manifest.json:
{
"name": "Calpine Extension",
"version": "1.0",
"description": "Log on to calpinemate",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension",
"default_icon": "calpine_not_logged_in.png"
},
"externally_connectable": {
"matches": ["http://calpinemate.com"]
}
}
One solution is to communicate the login status from your webpage to your extension (as explained here).
From your webpage you have to send messages to the extension to inform it about the user's login status.
Once the user successfully logs in, make sure you let the extension know:
chrome.runtime.sendMessage(
<your-extension-id>,
{status: 'LOGGED_IN'});
Once you detect that the user's session has ended (either expired or due to manually logging out), make sure you let the extension know:
chrome.runtime.sendMessage(
<your-extension-id>,
{status: 'LOGGED_OUT'});
From your extension listen for messages from the webpage and update accordingly, e.g. change the extension's icon. You'll need two icons (e.g. red.png for indicating logged-out user and green.png for indicating logged-in user) and the source code below:
background.js:
var url = '<your-webpage-url>';
// Listen for external messages (messages from web-pages).
chrome.runtime.onMessageExternal.addListener(function (msg, sender) {
if (sender.url === url) {
// OK, this page is allowed to communicate with me.
if (msg.status === 'LOGGED_IN') {
// Cool, the user is logged in.
chrome.browserAction.setIcon({path: 'green.png'});
} else if (msg.status === 'LOGGED_OUT') {
// How sad, the user is logges out.
chrome.browserAction.setIcon({path: 'red.png'});
}
}
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension",
"default_icon": "red.png"
},
"externally_connectable": {
"matches": ["<your-webpage-url>"]
}
}
U can keep 2 icon 1 in red and other in green and track session if login then show green icon else red
I need to create a simple chrome extension which when clicked have to navigate to that website.I have been searching long.But I couldn't find out.Please help me.
Here is my manifest.json file
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version":2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background_page": "background.html",
"permissions": [
"tabs"
]
}
this is my background.html
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
</script>
I am just trying to navigate into my site.But it is not working.Anyone please help me.I only have these two files in my directory and an image icon_128.png.Please help me
background_page is no longer supported in manifest_version 2. Instead use the new format. You can also remove the tabs permissions value since chrome.tabs.create doesn't require it.
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Move background.html to background.js, and remove the <script></script> tags.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
});
Maybe it is because you are missing theclosibg }) in your background page.
Besides, you don't need any permissions for what you want and it is recommended to use anon-persistent background page (a.k.a. event page).
E.g.:
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ "url": "http://calpinemate.com" });
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"description": "...",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension"
"default_icon": "icon_128.png"
}
}
BTW, since you seem to be interested in changing the extension icon, you can take a look into chrome.browserAction.setIcon().
Below is an example that toggles the extension icon when the user clicks on the browser-action (you can adapt it according to your specific needs).
background.js:
var icons = ["red.png", "green.png"];
chrome.browserAction.onClicked.addListener(function(tab) {
var iconIdx = localStorage.getItem("iconIdx");
var newIdx = iconIdx ? (parseInt(iconIdx) + 1) % 2 : 1;
chrome.browserAction.setIcon({ path: icons[newIdx] });
localStorage.setItem("iconIdx", newIdx);
});
I'm trying to write a chrome extension and cannot seem to understand how to implement the following scenario:
user is on page X
user clicks on the extension's button
something happens (specifically, user is redirected to some url)
here's the manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_title": "my title"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myscript.js"]
}
],
"permissions": [
"tabs", "https://*/*"
]
}
and here's myscript.js:
alert('entered myscript.js..');
function doMagic()
{
alert('extension button clicked!!');
}
chrome.extension.onClicked.addListener(doMagic);
i know im missing something really obvious, but cant seem to figure it out from the docs, other sites, etc.!!
Don't use a content_script, you really only need those if have to have access to the HTML of the tab.
Use a background_page for the onClicked listener and chrome.tabs.update to redirect the page.
function doMagic(tab) {
chrome.tabs.update(tab.id, { url: 'http://www.google.com' });
}
chrome.browserAction.onClicked.addListener(doMagic);