I'm making my first chrome extension and noticed that messages being sent from my popup.html page were getting duplicated in my content.js message event listener. I've console logged "sending message" before every message send and "message received" before every message, and I don't understand how the messages are being duplicated. I've also checked the chrome dev docs for sendMessage and onMessage and it specifies that the onMessage listener should only be fired once per sendMessage event.
Any help would be appreciated.
popup.html
<!DOCTYPE html>
<html>
<head>
<title>Messaging Practice</title>
</head>
<body>
<h1>Messaging Practice</h1>
<input type="button" id="send-message" value="Button">
<script src="popup.js"></script>
</body>
</html>
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log('message received')
console.log(request);
}
);
popup.js
var messageButton = document.querySelector("#send-message");
messageButton.onclick = function() {
chrome.tabs.query({currentWindow: true, active: true},
function(tabs) {
chrome.tabs.executeScript(
tabs[0].id, {file: "content.js"}
)
console.log("sending message")
chrome.tabs.sendMessage(tabs[0].id, "string message")
});
}
background.js
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'stackoverflow.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
manifest.json
{
"name": "Send Messages Practice",
"version": "1.0",
"manifest_version": 2,
"description": "Simple messaging practice with the chrome api",
"permissions": ["declarativeContent", "activeTab"],
"background": {
"scripts": ["background.js"],
"persistant": true
},
"page_action": {
"default_popup": "popup.html",
"scripts": ["content.js"],
"matches": ["http://*/*","https://*/*"]
}
}
Adding "return true;" to event handlers will prevent your code from firing again and again:
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action == "show_alert") {
alert(request.alert);
return true;
}
});
Get the same problem when I run my extension with multiple frames. #Wayne Smallman solution works for me:
recommending that all_frames be set to false in the manifest file
Related
I need to send some data to the newly created tab. I found some answers here to implement the listener first and then send a message. My event listener isn't working and can't catch the message.
manifest:
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1",
"permissions": ["tabs",
"http://*/*",
"https://*/*",
"activeTab"
],
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
}
}
background:
chrome.browserAction.onClicked.addListener((tab)=>{
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
if(tabs.length === 1 ){
chrome.tabs.create({url:"https://www.youtube.com/", active: true}, (tab)=>{
chrome.tabs.executeScript(tab.id, {file:"content.js"},tab=>{
chrome.tabs.sendMessage(tab.id, {"Active Objects": "elo"})
})
})
}
else{
alert("wrong page")
}
});
});
content:
chrome.runtime.onUpdate.addListener(
(request, sender, sendResponse)=>{
alert("elo")
}
);
I've finally got it to work. I didn't actually tested it the first time.
In addition to replacing onUpdate with onMessage in the content script you
might want to add setTimeout functions in the background script to delay the executions of
chrome.tabs.executeScript and chrome.tabs.sendMessage. Otherwise, you might
get (as I have) a runtime.lastError: The tab was closed.
And also you should avoid having multiple function callback arguments named
tab. Otherwise, they get overriden.
I simplified the background script to get it to work. You don't actually need
to query the current tab to create a tab and execute a script inside it. So,
I've simply kept chrome.tabs.create.
background.js:
chrome.browserAction.onClicked.addListener(function (_) {
chrome.tabs.create({url: "https://www.youtube.com/", active: true},
function (yt_tab) {
setTimeout(function () {
chrome.tabs.executeScript(yt_tab.id, {file: "content.js"});
setTimeout(function () {
chrome.tabs.sendMessage(yt_tab.id, {"Active Objects":"elo"});
}, 1000);
}, 1000);
});
});
content.js:
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
console.log(request);
}
);
I have made a programatically injected version of a Chrome extension in order to have the extension working on pages from hosts with different top-level domain names (cfr previous post). Now I would like to add a link to an options page to the popup menu. However I keep getting the following error message:
Unchecked runtime.lastError: Cannot access contents of url
"chrome-extension://••••••••••••••••/options.html".
Extension manifest must request permission to access this host.
Can anyone tell me how to request such a permission? In background.js, I have also tried chrome.tabs.create({url: "options.html"}); without success.
Note that the options page is displayed ok, but the error message keeps coming.
manifest.json:
{
"manifest_version": 2,
"name": "My Extension",
"version": "0.5",
"description": "Does what it does",
"icons": {"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
},
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action":{
"default_popup": "popup.html"
},
"optional_permissions":["tabs","https://*/*"],
"permissions": ["storage"]
}
popup.html:
<html>
<head>
</head>
<body>
<ul>
<li id="li_1">Enable My Extension</li>
<li id="li_2">Options</li>
</ul>
<script src="jQuery.js"></script>
<script src="popup.js"></script>
</body>
</html>
popup.js:
jQuery(function($){
var tabId = 0;
$(document).ready(function(){
$("#li_1").click(function(){ // this works
window.close();
chrome.permissions.request({
permissions: ['tabs'],
origins: ["https://*/*"]
}, function(granted) {
if (granted) {
chrome.runtime.sendMessage("granted");
} else {
alert("denied");
}
});
});
$("#li_2").click(function(){ // this sends request to background.js which then causes error
window.close();
chrome.runtime.sendMessage("openOptions");
});
});
});
background.js:
chrome.runtime.onMessage.addListener(
function(message) {
switch(message){
case "granted": //this works, please ignore
var tabId = 0;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
tabId = tabs[0].id;
injectScript(tabId);
chrome.permissions.contains({origins:["https://*/*"]}, function(perm) {
if (perm) {
chrome.tabs.onUpdated.addListener(function(tabId){
injectScript(tabId);
});
}
});
});
break;
case "openOptions": //this does not work – generates error msg
chrome.runtime.openOptionsPage();
break;
}
return true;
});
As suggested by wOxxOm in a comment above, the error was caused by he extension's attempt to inject the content script into the options.html page. One way to circumvent that would be to insert a condition into the injectScript() function (which was not shown in the question) in background.js, ensuring that only web pages are injected. A working version is shown below.
background.js
function injectScript(tab){
chrome.tabs.get(tab,function(thisTab){ // get tab info
if(thisTab.url.startsWith("http")){ // condition: is this a web page?
chrome.tabs.executeScript(tab,{ // if so, inject scripts
file: "jQuery.js"
});
chrome.tabs.executeScript(tab,{
file: "content.js"
});
}
});
}
chrome.runtime.onMessage.addListener(
function(message) {
switch(message){
case "granted":
var tabId = 0;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
tabId = tabs[0].id;
injectScript(tabId);
chrome.permissions.contains({origins:["https://*/*"]}, function(perm) {
if (perm) {
chrome.tabs.onUpdated.addListener(function(tabId){
injectScript(tabId);
});
}
});
});
break;
case "openOptions":
chrome.runtime.openOptionsPage();
break;
}
return true;
});
Forgive me for any glaring mistakes as I am new to chrome extensions, but this error with Chrome's message passing API has been discussed here, here, and here in the past and the common response is along the lines of 'disable existing Chrome extensions, one of them is causing the error'. Is this the best that can be accomplished? Are we supposed to just roll over and accept the fact that our extensions will conflict with others? Returning true or returning a Promise for the listener callback function and using sendResponse does not solve the problem for me.
Currently, I can only get the new value stored in chrome.storage.local (no errors) by disabling all other chrome extensions, removing the extension and loading back up the unpacked extension. The code interestingly only seems to work on developer.chrome.com, it doesn't work at all on the other "matches" URLs in manifest.json.
I think that there is some significance in the await and async operators in solving this issue but I am unsure how to properly implement it.
manifest.json:
{
"manifest_version": 2,
"name": "my extension",
"version": "1.0",
"description": "its my extension",
"permissions": [
"declarativeContent",
"storage",
"activeTab"
],
"content_scripts": [
{
"matches": [
"*://developer.chrome.com/*",
"*://bbc.co.uk/*",
"*://theguardian.com/*",
"*://dailymail.co.uk/*"
],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js; object-src 'self'",
"page_action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>my extension</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>my extension</h1>
<h2>Article: <span id="article-headline"></span></h2>
<button id="detect-article">Detect Article</button>
</body>
</html>
popup.js:
$(document).ready(function() {
$("#detect-article").click(function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {request: "Requesting headline"}, function(response) {
console.log("Requesting headline")
});
});
});
})
function getHeadline(changes) {
let changedValues = Object.keys(changes);
//console.log(changedValues);
for (var item of changedValues) {
console.log("new value: " + changes[item].newValue);
$("#article-headline").text(changes[item].newValue)
}
}
chrome.storage.onChanged.addListener(getHeadline);
content.js:
function handleRequest(message, sender, sendResponse) {
console.log("Request recieved");
let headlineList = document.getElementsByTagName("h1");
chrome.storage.local.set({headline: headlineList[0].innerText}, function() {
console.log("'" + headlineList[0].innerText + "' stored in local storage");
});
return true;
}
chrome.runtime.onMessage.addListener(handleRequest);
background.js:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'developer.chrome.com' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'bbc.co.uk' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'theguardian.com' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'dailymail.co.uk' },
}),
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Many thanks for taking the time to look/re-look at this issue, solutions pertaining to the aforementioned 'disable existing extensions' are not what I am looking for.
When you specify a callback for sendMessage you're telling the API that you NEED a response so when your content script doesn't respond using sendResponse the API thinks something terrible happened and reports it as such!
Reminder: when editing content scripts make sure to reload both the extension on chrome://extensions page and the tabs that should have this content script.
If you need a response from asynchronously running code such as chrome API callback:
Keep return true
Call sendResponse(someImportantData) inside the callback
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
chrome.storage.local.set({foo: 'bar'}, () => {
sendResponse('whatever');
});
return true;
});
Same for Promise, but don't use async for the onMessage listener, more info.
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
fetch(message.url).then(r => r.text())
.then(t => sendResponse({ok: t}))
.catch(e => sendResponse({err: e.message}));
return true;
});
If you need a response and it can be sent immediately:
Replace return true with sendResponse
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
sendResponse('whatever');
});
If you don't need any response:
Remove the callback in sendMessage
chrome.tabs.sendMessage(tabs[0].id, {request: "Requesting headline"});
Remove return true - all it does currently is telling the API to keep the messaging port open indefinitely, which will never be used by you, so it's just a memory leak source.
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// do something
// don't return true
// ManifestV2: don't call sendResponse
// ManifestV3 bug: uncomment the next line
// sendResponse();
});
For ManifestV3 in Chrome 99, 100, 101 you need a dummy sendResponse() call.
i am new to Javascript and am trying to implement a google chrome extension. I read the instructions (https://developer.chrome.com/extensions/getstarted), but still I have some troubles with my code.
I have got a popup menu with buttons and I want to get back the DOM content of the current page when a button is clicked.
Therefore i created a contentscript.js and a popup.js. The popup.js asks the contentscript to get the DOM (still needs to be implemented how I do that) and send back the DOM.
I receive the error:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
This is my code:
popup.js
var ads = ["increase", "reduce", "blabla"];
function markAds(text) {
document.getElementById("markAd").innerHTML=ads[0];
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
alert(response.farewell);
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var markAd = document.getElementById('markAd');
// onClick's logic below:
markAd.addEventListener('click', function() {
markAds();
});
});
mainfest.js
{
"name": "Test",
"description": "Test Description",
"version": "0.7",
"permissions": ["contextMenus","activeTab"],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentscript.js"]
}],
"browser_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
contentscript.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
I've been trying for hours to get popup.js to talk with the rest of my chrome extension using chrome api's sendMessage and onMessage. For testing purposes, all I want right now is to log something onto my currently active tab when a button is pressed on popup.js. This seems like it should be simple, but I just can't figure out what the problem is. Would really appreciate any help and explanation!
popup.html
<!DOCTYPE html>
<body>
<p>testing</p>
<input type="submit" id="clickme" value="button">
</body>
popup.js
function popup(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("clickme").addEventListener("click",popup)
});
content.js (I expect this to log 'started' onto console of my active tab)
// content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "clicked_browser_action" ) {
console.log('started')
}
}
);
Just in case it applies, this is the manifest.json
{
"manifest_version":2,
"name": "extension",
"version": "0.1",
"content_scripts":[
{
"matches": [
"<all_urls>"
],
"js":["jquery-3.1.1.min.js","content.js"]
}],
"browser_action":{
"default_icon":"icon.png",
"default_popup":"popup.html"
},
"background":{
"scripts":["background.js"]
}
}