I don't understand Google Chrome extensions. Please help. - javascript

I want to do something that seems like it should be fairly simple, but I can't get it to work.
All I want it to do is when the button in the popup is clicked I want to log the word "Hello" to the console. At the moment nothing happens. No error message. Just nothing.
Here is my manifest.jason file
{
"name": "Content Script",
"version": "1.0",
"description": "Experiments with content scripts.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
Here is my popup.html
<h1>Hello</h1>
<script>
function changeField() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {"code": "sayHello"});
});
}
</script>
<button onclick="changeField();">Click</button>
Here is my contentscript.js
function sayHello() {
console.log("Hello");
}
chrome.extension.onRequest.addListener(
function(request, sender, response) {
if(request.code == 'sayHello') {
sayHello();
}
}
);
I've been reading the docs but they seem to skip over a lot of things. If someone could explain why this doesn't work I would be eternally grateful.

You didn't inject your content script to the page which console lives in.
Add content_scripts segment to your manifest.json file.
There is a reference of manifest.json file on chrome extension official site.
{
"name": "Content Script",
"version": "1.0",
"description": "Experiments with content scripts.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"popup": "popup.html"
},
"content_scripts":[{
"matches":["http://*/*"],
"js":["content_script.js"]
}]
}

Related

No errors , but no output in console from chrome extension

I'm trying to build an extension to monitor the xhr portion of the devtools network tab. I decided to start as simple as possible with the background script below. I'm seeing no errors on loading the extension, but don't see any output in the console.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": [
"https://yahoo.com/*"
],
"permissions": [
"webRequest"
]
}
In my background.js:
(function () {
chrome.webRequest.onCompleted.addListener(
function (details) {
console.log('HELLO THERE!!!!', details);
},
{ urls: ["<all_urls>"] }
);
}());
What am I doing wrong?
The background-page and webpage console log to different places so you wouldn't see console.log('HELLO THERE!!!!', details); in the webpage's console. Refer the answer below for how to view the background-page console.
Accessing console and devtools of extension's background.js

Chrome Extension Using Manifest 3 and Multiple Scripts

I am trying to import scripts and am apparently only able to get one. I am using this manifest:
{
"manifest_version": 3,
"name": "Auto_Select",
"description": "This extension auto selects Mturk HITs",
"version": "1.0",
"action": {
"default_icon": "auto_select.png",
"type": "module",
"default_popup": "auto_select.html"
},
"background": {
"service_worker": "worker_wrapper.js"
},
"permissions": [
"tabs",
"activeTab"
],
"host_permissions": [
"<all_urls>"
]
}
This is "worker_wrapper.js":
try {
importScripts("js.cookie.js", "auto_select.js", "cookie_mgmt.js");
} catch(e) {
console.log(e);
}
When I try to load the extension I get this error:
ReferenceError: document is not defined
at auto_select.js:26:1
at worker_wrapper.js:4:5
All the scripts are in the root directory for the extension so I don't understand why it doesn't error on the first script but rather on the 2nd. Can someone help me with this? TIA.

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

Cannot read property 'onBeforeNavigate' of undefined (Chrome Extension)

I simpley want to get the extension fired if the action on 'onBeforeNavigate' happens. But for no reason the extension always trows this error:
Cannot read property 'onBeforeNavigate' of undefined
Error is on this line chrome.webNavigation.onBeforeNavigate.addListener(setProxy);
Here is my code so far:
popup.js
function setProxy(details){
console.log("Got fired!\n");
}
chrome.webNavigation.onBeforeNavigate.addListener(setProxy);
manifest.json
{
"manifest_version": 2,
"name": "Proxy Changer",
"description": "This extension Changes the Proxy settings every time you load a website",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"activeTab",
"webRequest",
"notifications",
"debugger",
"background",
"management",
"https://ajax.googleapis.com/",
"<all_urls>",
"webRequestBlocking"
],
"background": {
"scripts": ["popup.js"],
"persistent": true,
"js": ["jQuery.js", "popup.js"]
}
}
I hate to say that I am very new to the Google Chrome Extension API but for me the Extension API is not working... I don't know what I am doing wrong..
I already watched to videos but still same error...
I would appreciate your help. Thank you and kind regards!
just add "webNavigation" permission to Manifest.json
{
"name": "My extension",
...
"permissions": [
"webNavigation"
],
...
}
see documentation
https://developer.chrome.com/docs/extensions/reference/webNavigation/#event-onCreatedNavigationTarget

No action in passing simple message from popup.html to background.js

I'm new to chrome extension coding and relatively new to javascript. The extension is of the type page_action . I'm trying to send a simple message to background.js on click of button in popup.html. I've seen similar questions on this site, however nothing seems working. The loading of the extension is fine. please help
/* __background.js__ */
function checkForValidUrl(tabId, changeInfo,tab){
console.log("Extension loaded");
chrome.pageAction.show(tabId);
}
function readMessage (request, sender, sendResponse){
alert("reached");
console.log(request.greeting);
sendRequest({farewell:"goodbye"});
}
chrome.extension.onRequest.addListener(readMessage);
chrome.tabs.onUpdated.addListener(checkForValidUrl);
/* __manifest.json__ */
{
"name": "DemoExtension",
"version": "1.0",
"manifest_version": 2,
"background": {
"scripts": [
"jquery.js",
"background.js"
]
},
"description": "demo extension to learn coding chrome extensions.",
"icons": {
"16": "images/16x16.png",
"48": "images/48x48.png",
"128": "images/128x128.png"
},
"page_action": {
"default_icon": {
"19": "images/19x19.png",
"38": "images/38x38.png"
},
"default_title": "Demo extension",
"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions": [
"tabs",
"storage",
"http://*/*",
"https://*/*"
]
}
-
__popup.html__
<!DOCTYPE HTML>
<html>
<head>
<title>Demo extension</title>
<script src="./popup.js"></script>
</head>
<body>
<button id="clickMe">Add</button>
</body>
</html>
-
__popup.js__
function sendMessageToExtn() {
alert("reached in popup");
chrome.extension.sendMessage({
greeting : "hello" },
function(response) { console.log(response.farewell);
});
}
document.getElementById('clickMe').addEventListener('click', function () {
sendMessageToExtn();
});
I'm now getting error Uncaught TypeError: Cannot call method 'addEventListener' of null (anonymous function)
There is a similar question .
Solved the problem. Firstly incorporating the suggestions by #apsillers. Then finally by moving the
<script src="./popup.js"></script>
in the body from the head, below the button tags.

Categories