We Keep Coding

I am getting error in chrome extension about sendmessage undefined

I am making chrome extension but I am getting error of "Cannot read properties of undefined (reading 'sendMessage')"
My content.js file is
document.addEventListener("visibilitychange", event => {
if (document.visibilityState === "visible") {
chrome.runtime.sendMessage({ mycontent: "from content script" })
console.log("tab is active")
} else {
chrome.runtime.sendMessage({ mycontent: "from content script" })
console.log("tab is inactive")
}
})
And my background.js file is
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
if (message.mycontent) {
}
})
and my manifest.json file is
{
"name": "Ju Close Chrome",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
},
"permissions": ["notifications", "storage", "alarms", "activeTab"],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery.js", "content.js"]
}
],
"action": {
"default_popup": "popup.html"
}
}

send a message from content script to popup script

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"
});

Chrome extension does not work on the first installation

I am learning to how to make a chrome extension and trying to make popup js alert hello when a button is clicked.
background js
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
if(request.todo=="showPageAction"){
chrome.tabs.query({active:true,currentWindow:true}, function(tabs){
chrome.pageAction.show(tabs[0].id);
});
}
});
popup.js
document.addEventListener('DOMContentLoaded',function(){
$('#btnChange').click(function(){
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.sendMessage(tabs[0].id,{todo:"clickAll"})})
});
});
content.js
chrome.runtime.sendMessage({todo:"showPageAction"});
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse)
{
if (request.todo =="clickAll"){
alert("alert");
}
});
manifest.json
{
"name": "alert",
"version": "1",
"description": "alert ",
"permissions": ["declarativeContent","activeTab","storage","https://*","tabs"],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://*"],
"js": ["content.js", "jquery.js"],
"run_at": "document_start",
"all_frames": true
}
],
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"128": "images/img.png"
}
},
"icons": {
"128": "images/img.png"
},
"manifest_version": 2
}
The code does not work when first time installed and requires refreshing to work. what can I do to make it work on first installation?

Accessing DOM in Chrome Extension

I'm using the example here as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:
<script type="text/javascript" src="popup.js"></script>
And the first lines of popup.js are:
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("test");
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
Manifest.json has the following permissions:
{
"manifest_version": 2,
"name": "",
"version": "1.0",
"description": "",
"icons": { "16": "icon16.jpg",
"48": "icon48.jpg",
"128": "icon128.jpg" },
"minimum_chrome_version": "46",
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "getDescription.js"],
"run_at": "document_start"
}],
"options_page": "options.html",
"permissions": ["<all_urls>", "tabs","storage", "activeTab"]
}
Nothing is appearing in console, as if function isn't firing at all.

As it mention here onClicked fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
If you want to have the popup and then to execute a script when the icon is clicked use below approach.
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "la lala laa",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Inside the background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "popup.js"});
});
Or it should work fine if you have below in your popup.html
<script src="popup.js"></script>
Inside your popup.js
window.onload = function() {
console.log("do whatever you want here !!!")
}

Content script answer twice on popup message - Chrome Extensions

I got result but it returns two alerts "Content: This is a test" but in scripts I send only 1 post.
It works perfect but two answers is too annoying. Help pls.
Manifest:
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"description": "Test",
"background": {
"scripts": ["event.js"],
"persistent": true
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions": [ "tabs", "http://*/*", "https://*/*" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": true
}
],
"browser_action": {
"name": "Do Action",
"default_icon": "icon.png",
"default_popup": "popup.html"
}}
Popup script.js:
$("#myButton").click(function(){
chrome.tabs.getSelected(null, function(tab)
{
chrome.tabs.executeScript(tab.id, { file: "content.js" }, function()
{
var port = chrome.tabs.connect(tab.id, { name: "port-conn" });
port.postMessage({ data: "This is a test" });
port.onMessage.addListener(function (msg)
{
alert("Content: " + msg.answer);
});
});
});
}...
content.js:
chrome.extension.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
port.postMessage({answer: msg.data});
});
});

Content.js is specified first in manifest so it is now loading when your extension is loaded. Then you are using it via executeScript so it runs the second time.
do these changes.
Popup script.js:
chrome.tabs.getSelected(null, function(tab){
var port = chrome.tabs.connect(tab.id, { name: "port-conn" });
port.onMessage.addListener(function (msg)
{
alert("Content: " + msg.answer);
});
$("#myButton").click(function(){
port.postMessage({ data: "This is a test" });
});
});
That is the point of messaging. if it did not work then you HAVE TO USE BACKGROUND SCRIPT AS WELL that just forwards message between content and popup

Problem solved.
In manifest
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": true
}
],
it runs content.js on every page and
{ file: "content.js" }
Run it again in active tab. So thats why one tab run content twice.