I read this and searched on other places but I can't solve this issue. I am using long-lived connections. I send a message from content script to background and after that I want to send a message from background to content script. However, I am not able to receive messages on the content file for some reason...
Content script:
var port = chrome.runtime.connect({name: "my-channel"});
// receive messages
port.onMessage.addListener(function(msg) {
console.log(msg); // doesn't log anything
});
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('click', function() {
// send message
port.postMessage({myProperty: "value"});
});
});
Background:
chrome.runtime.onConnect.addListener(function(port) {
if(port.name == "my-channel"){
port.onMessage.addListener(function(msg) {
// do something
// then send message to the content
port.postMessage({myProperty: "value"});
});
}
});
EDIT: my manifest.json
{
"manifest_version": 2,
"name": "Test extension",
"version": "1.0",
"browser_action": {
"default_popup": "main_ui.html",
"default_title": "Test Extension"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["logic.js"]
}],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"tabs",
"activeTab"
]
}
solution: I was using an old reference of "port" of when connection happened. The 2nd argument of the listener (that isn't visible there) is actually the port.
Related
Trying to send a message from background.js to content.js returns Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I've tried:
background.js
chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
chrome.tabs.sendMessage(tabId, "some-random-message")
})
content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
alert(message)
sendResponse("Successfully received message.")
})
Is this happening because I'm trying to send a message to my content script after that tab has been closed? If so, is there any way to still access the document in the content script after or while the tab is closing?
To add more info, I also did try using chrome.tabs.onCreated... instead of onRemoved but with no avail.
EDIT: Adding my manifest.json file.
{
"manifest_version": 3,
"name": "Some Extension Name",
"version": "0.0.1",
"action": {
"default_popup": "popup.html",
"default_title": "Some Extension Name"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["./content.js"]
}
],
"background": {
"service_worker": "./background.js"
},
"permissions": ["cookies", "tabs", "storage"]
}
manifest.json
{
"manifest_version": 2,
"name": "Project",
"description": "Chrome Extension for sending messages",
"version": "1.0",
"browser_action": {
"default_icon": "red_dot.png"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"storage"
],
"background" : {
"scripts" : ["background.js"]
},
"content_scripts": [
{
"matches":["https://www.website.com/*"],
"js":["keypress.js", "jquery.js", "js_file.js"],
"run_at": "document_end"
}
]
}
background.js
var running = false
chrome.browserAction.onClicked.addListener(function(tab) {
if (running) {
alert('script is running, turning off');
chrome.browserAction.setIcon({path: "red_dot.png"})
running = false
} else {
alert('script is not running, turning on');
chrome.browserAction.setIcon({path: "green_dot.jpg"})
running = true
}
});
When I click on the icon, I get the popup as expected, but the icon itself isn't changing.
I'm getting this error:
Unchecked runtime.lastError: Icon invalid.
but I don't understand why. The code seems valid.
use this api and carefully enter params specifically path
https://developer.chrome.com/extensions/browserAction#method-setIcon
I'm trying to listen to events on a webpage by using Chrome Extension app build with React and Redux.
I've setup a content.js file that works as a content script and it can send messages to my React app just fine, the app can see the event properly... but there's an issue - I want to send MouseEvent (or any other Event, for that matter) data to my React app but my React app only recieves
data: {
isTrusted: true
},
type: 'onPageClick',
So as you can see everything from the MouseEvent is gone, except for isTrusted. Do I need any special permission in manifest.json?
Files:
// manifest.json
{
"short_name": "Example Extension",
"name": "Example Extension",
"icons": {
//...
},
"content_security_policy": "...",
"permissions": [
"activeTab",
"tabs",
"contextMenus",
"background"
],
"manifest_version": 2,
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "Example Extension"
},
"content_scripts": [
{
"js": [ "content.js"],
"matches": [ "<all_urls>"]
}
],
"background": {
"scripts": ["background.js"]
}
}
// content.js
document.addEventListener('click', (ev) => {
console.log(ev);
chrome.runtime.sendMessage('EXTENSION-ID', {
type: 'onPageClick',
data: ev,
});
});
// fragment of App.js
useEffect(() => {
chrome.runtime.onMessage.addListener((...args) => console.log(args));
}, []);
Is it even possible to send event data? I've been able to send custom JSON objects without any issues, but every field from Event gets removed when sending the message.
Thanks!
I want to know how to detect if a button with a certain id is clicked on a webpage with my chrome extension.
With my code I have an error saying that my element is undefined.
Here is my manifest :
{
"manifest_version": 2,
"name": "app",
"description": "my app",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Changer le background"
},
"permissions": [
"activeTab",
"storage"
]
}
And my popup.js file :
document.addEventListener('DOMContentLoaded', () => {
getCurrentTabUrl((url) => {
document.getElementById('mybutton').addEventListener('click', function() {
var script = "console.log('clicked');";
chrome.tabs.executeScript({code: script});
});
});
});
your popup.js will not load until the user himself will click on the extension's icon... i think you should change your approach and use a content-script like this:
document.getElementById('mybutton').addEventListener('click', function() {
console.log('clicked');
});
you'll need to update your manifest.json for using a content script, something like that:
"content_scripts": [
{
"matches": ["the url of a page for the script", "the url of another page"],
"js": ["your_script.js"]
}
],
I have a very simple chrome extension, where I'm trying to pass a message from the background script to the content script. But chrome.runtime is undefined.
Here's literally all the code, as you can see there's almost nothing to it. In the content script, runtime is undefined.
Background Script:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.runtime.sendMessage({action: 'someAction'},
function(response) {
console.log('Response: ', response);
});
});
Content Script:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
sendResponse({
user: 'user'
});
});
manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"description": "Some stupid extension",
"browser_action": {
"default_icon": "icons/MyExtensionIcon.png"
},
"icons": {
"48": "icons/MyExtensionIcon.png"
},
"permissions": [
"tabs",
"storage",
"https://*/",
"http://*/"
],
"content_scripts": [
{
"matches": ["*://*.twitter.com/*", "https://twitter.com/*"],
"js": ["js/content.js"]
}
],
"background": {
"scripts": ["js/background.js"],
"persistent": true
},
"web_accessible_resources": [
"js/*",
"css/*"
]
}
Other Info:
Chrome Version 58.0.3029.110 (64-bit)
Installing my extension as an
"Unpacked extension" with developer mode
Ok I figured it out. It's absolutely stupid, but it appears this is simply a Heisenbug. By adding a breakpoint, or debugger statement, it causes that value to be undefined. Maybe a chrome bug?
I swear, every day Chrome feels more, and more like Internet Explorer.