I must admit the chrome api seems confusing to me. I'm trying to create an extension (page-action) in which the content script will send a message to the popup and vice versa.
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"offline_enabled": true,
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.stackoverflow.com/*"],
"js": ["jquery.js", "content.js"],
"run_at": "document_idle",
"all_frames": false
}],
"page_action": {
"default_title": "Test Extension"
}
}
background.js:
chrome.runtime.onMessage.addListener(function (msg, sender) {
if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
chrome.pageAction.show(sender.tab.id);
}
});
chrome.pageAction.onClicked.addListener(function (tab) {
chrome.windows.create({ url: 'popup.html', type: 'panel' });
});
content.js:
chrome.runtime.sendMessage({
from: 'content',
subject: 'showPageAction'
});
Now the tricky part: Clicking a button in the popup which will send a message to the tab with the content script, the content script will run a function processing the dom and when done send a message back to the popup.
Related
i'm trying to send a message from my content script to my popup script because i need to use popup DOM when a page is loaded, here's what i tried :
contentScript.js
window.addEventListener("load", function() {
chrome.runtime.sendMessage({
"action": "init"
});
})
popup.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action == "init") {
alert('Initialisation demandée...')
} else {
alert('Je n\'ai pas compris')
}
})
manifest.json
{
"manifest_version": 2,
"name": "Youtube color modifier",
"description": "Change youtube colors",
"version": "1.0",
"page_action": {
"default_icon": "icon.png",
"default_title": "Youtube color modifier",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}]
}
Thank you for helping a noob :))
If you have a content script, it will be run everytime you (re)load the page, assuming that the page you are visiting is registered in the manifest.json.
So instead of this:
window.addEventListener("load", function() {
chrome.runtime.sendMessage({
"action": "init"
});
})
simply try this:
chrome.runtime.sendMessage({
"action": "init"
});
I want to my chrome extension change icon when there is certain string contained in current tab's url. I am a newbie on chrome extension design, so I test some basic message sending functions first. But the setIcon function does not work, and no error message shows in extension.
Here is my manifest file:
{"permissions" ["identity","identity.email","tabs","activeTab","http://34.204.12.200:5000/"],
"short_name": "React App",
"name": "React Extension",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_title": "React Ext",
"default_icon" : {
"512": "icon1.png",
"512": "icon2.png"
}
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
],
"version": "1.0"
}
my contentScripts:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: true,
});
my background.js:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === "updateIcon") {
if (msg.value===false) {
chrome.pageAction.setIcon({
tabId: sender.tab.id,
path: {"512":"icon2.png"}
});
//alert(msg received)
} else {
//tabId: sender.tab.id,
chrome.pageAction.setIcon({
tabId: sender.tab.id,
path: {"512":"icon1.png"}});
}
}
});
both my icon1 and icon2 are 512*512, and they are in same directory as manifest.json.
my chrome extension icon always show icon2, it seems that both my background.js and contentScript not working. Does anybody know why?
I am trying to create a quick Chrome extension (complete beginner) and just want to display an alert whenever the icon is clicked, so I tried the following:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["bgscript.js"]
}]
}
bgscript.js
chrome.browserAction.onClicked.addListener(function(tab) {
alert('icon clicked')
});
However when I click on my icon, nothing happens! Looking at the above - can anyone spot why this wouldn't work?
In order to be notified for browser-action's onClicked event, you need a background-page (or better yet event-page), not a content-script.
Change your manifest like this:
// Replace that:
"content_scripts" : [{...}]
// with this:
"background": {
"persistent": false,
"scripts": ["bgscript.js"]
}
If you want the browser-action to invoke something on a content-script, you need to communicate throught the background-page using Message Passing (e.g. Simple one-time requests).
E.g.:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["content.js"]
}]
}
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
/* Send a message to the active tab's content script */
chrome.tabs.sendMessage(tab.id, { action: 'saySomething' });
});
content.js
chrome.runtime.onMessage.addListener(function (msg) {
/* We received a message, let's do as instructed */
if (msg.action === 'saySomething') {
alert('something');
}
});
I,am developing an extension in which i have to extract data from linkedin profile page when user press button on popup. I,am passing message from the popup.js page to contentscript and in response i will get data extracted from linkedin profile page by contentscript so that i can display it in popup.html. But I,am getting error when i inspected the popup.html. The error is:
Port: Could not establish connection. Receiving end does not exist. lastError:29
Error in event handler for 'undefined': Cannot read property 'farewell' of undefined
TypeError: Cannot read property 'farewell' of undefined
at chrome-extension://kdfgoafjicddfffdbfofdmckejemfije/popup.js:6:25
at <error: illegal access>
at Event.dispatchToListener (event_bindings:356:21)
at Event.dispatch_ (event_bindings:342:27)
at Event.dispatch (event_bindings:362:17)
at Object.chromeHidden.Port.dispatchOnDisconnect (miscellaneous_bindings:258:27)
For reference, my manifest file is:
{
"name": "SoftwareGrid",
"version": "0.5",
"icons": { "16": "icons/16.png","48": "icons/48.png", "128": "icons/128.png" },
"description": "Shows user cresidentials on Linkedin",
"permissions": [
"cookies",
"tabs",
"http://www.linkedin.com/*"
],
"browser_action": {
"default_title": "Show Profile",
"default_icon": { "16": "icons/16.png","48": "icons/48.png", "128": "icons/128.png" },
"default_popup": "popup.html"
},
"background": {
"scripts": ["jquery-1.7.2.min.js","background.js"]
},
"content_scripts": [{
"matches": ["http://www.linkedin.com/*"],
"all_frames": true,
"js": ["jquery-1.7.2.min.js", "script.js"],
"run_at": "document_end"
}],
"web_accessible_resources": [
"icons/i1.png"
],
"manifest_version": 2
}
My popup.js file:
function sendClicks() {
console.log("popup.js > sendClicks()");
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
console.log("avra' inviato?");
}
$(function() {
console.log("popup.js > OMD Extension ready");
$('#sendclicks').click(function(){
sendClicks();
});
});
My contentscript file
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
Plz help!
You may have to add this in your manifest:
"permissions" : ["tabs"]
I'd like to make a website that is not part of the chrome plugin but rather just uses some API that the plugin exposes to it. Is this possible and if so, how do I do it? I googled this question and was unable to find anything.
I'm trying to use content scripts but nothing happens. Can someone explain what's wrong here?
manifest.json
{
"manifest_version": 2,
"name": "Hello World Extension",
"description": "This extension prints hello world.",
"version": "1.0",
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://locahost:8888/*"],
"js": ["EmotivAPI.js"]
}
]
}
EmotivAPI.js
var port = chrome.runtime.connect();
console.log("Hello?");
window.addEventListener("message", function (event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
port.postMessage(event.data.text);
alert("recieved!");
}
}, false);
js in the webpage
window.sayHello = function () {
window.postMessage({ type: "FROM_PAGE", text: "Hello from webpage!" }, "*");
}
console.log('Emotiv extension loaded.');
}
I'm calling window.sayHello() from the console
Content Scripts can help you in this case.
The content script will be injected into a page:
"content_scripts": [
{
"matches": ["http://www.google.com/*"], // try with "http://localhost:*/*" or "http://localhost:*"
"css": ["mystyles.css"],
"js": ["content_script.js"]
}
]
If you want to inject the code only sometimes, use the permissions field instead
/* in manifest.json */
"permissions": [
"tabs", "http://*/*"
],
In you extension html file, you can then execute the script by:
chrome.tabs.executeScript(null, {file: "content_script.js"});