I'm trying to create a chrome extension to learn front-end technologies, and got stuck on message passing between popup and content script.
The following is what I'm trying to do:
1. Let background page hold a global var.
2. When user clicking a button on the popup html, the global var is modified. Meanwhile, the popup sends the global var to the content scripts for all of the tabs.
In the background.js I have:
var settings = {
version: 1,
enabled: false
};
popup.js:
$(document).ready(function(){
$("#switcher").click(function( event ) {
event.preventDefault();
var bg = chrome.extension.getBackgroundPage();
var settings = bg.settings;
settings.enabled = !settings.enabled;
// send message to the content for all the tabs
chrome.tabs.query({active: true}, function (tabs) {
for (var i = 0; i < tabs.length; ++i) {
console.log("sending message to tab " + i);
chrome.runtime.sendMessage(tabs[i].id, {enabled: settings.enabled}, function(response) {
console.log(response);
});
}
});
});
});
Finally, the content.js:
$(document).ready(function(){
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
console.log("request is: " + request.enabled);
sendResponse("get it");
}
);
});
I tried to debug it, but I found the 'sendMessage' function never got returned back.. and the 'onMessage' never got triggered. Did I miss something?
My manifest file:
{
"name": "__MSG_appName__",
"version": "0.0.1",
"manifest_version": 2,
"description": "__MSG_appDescription__",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"permissions": [
"contextMenus", "storage", "tabs"
],
"background": {
"scripts": [
"scripts/background.js"
],
"persistent": true
},
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_popup": "popup.html"
},
"content_scripts": [
{
"run_at":"document_start",
"all_frames":true,
"matches": ["*://*/*"],
"js": ["bower_components/jquery/dist/jquery.min.js", "scripts/content.js"]
}
],
"web_accessible_resources": ["bower_components/jquery/dist/jquery.min.map"]
}
You should be using chrome.tabs.sendMessage instead of chrome.runtime.sendMessage to send messages to content scripts in tabs.
Related
How do I pass the entire DOM content of Codechef.com to the background.js via contentScript?
I just want to get the problem tag of codechef question. This will help me to fetch the problem code. For this I need to query the dom.
{
"manifest_version": 3,
"name": "CodechefNotifier",
"version": "1.0",
"description": "Notifier for CodeChef",
"action": {
"default_popup": "index.html"
},
"permissions": [
"webRequest", "debugger", "tabs", "<all_urls>", "notifications", "scripting",
"activeTab"
],
"host_permissions": [
"https://www.codechef.com/"
],
"background": {
"service_worker": "background.js"
},
"content_scripts":[
{
"matches":["<all_urls>"],
"js":["contentScript.js"]
}
]
}
const button = document.createElement('button');
button.textContent = 'Greet me!'
document.body.insertAdjacentElement('afterbegin', button);
var tags = [ "h1" ];
var all_headings = [];
var h1s = document.querySelectorAll("h1");
all_headings.push(document.body.innerHTML);
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?codechef\.com/;
// A function to use as callback
function doStuffWithDom(domContent) {
console.log('I received the following DOM content:\n' + domContent);
}
// When the browser-action button is clicked...w
window.addEventListener('load',function (tab) {
// ...check the URL of the active tab against our pattern and...
if (urlRegex.test(tab.url)) {
// ...if it matches, send a message specifying a callback too
chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);
}
I want to pass dom content to the background script
popup.js
function start(){
let options = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "/icon_128.png"
}
chrome.notifications.create(options);
}
// When the button is clicked, inject function will execute on current page
startButton.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: start,
});
});
manifest.json
{
"name": "Meet Auto Exit Bot",
"description": "Exits meet based on number of people present.",
"version": "1.0",
"manifest_version": 3,
"icons": {
"128": "icon_128.png"
},
"action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"storage",
"activeTab",
"scripting",
"notifications"
]
}
I am developing a chrome in which I am using chrome notifications to notify users. But I am not able to figure out why chrome.notifications.create is not working inside my start() function. It works when using outside the callback function.
Click event not working for gmail pages on content script of a chrome extension that I am creating. Here is my manifest.json file:
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["https://mail.google.com/*"],
"js": ["jquery-3.4.1.min.js", "content-script.js"],
"all_frames": true
}
],
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 2
}
content-script.js:
var composeBtn = true;
function loop() {
setTimeout(function() {
if ($(".T-I.J-J5-Ji.T-I-KE.L3").length && composeBtn) {
$(".T-I.J-J5-Ji.T-I-KE.L3").on("click", function() {
alert("hello");
});
composeBtn = false;
}
loop();
}, 5000);
}
loop();
$(".T-I.J-J5-Ji.T-I-KE.L3") is the Compose button in gmail. Cicking on it should show an alert.
I created a simple chrome extension that adds some functionality to my webPage (site), that is only accessible via extension. Is it possible to postMessages directly from webpage (NOT via content-script) to extension's background-script. And if it's not, what is the use-case of chrome.runtime.connect(EXTENSION_ID);, I mean why it's accessible from web-page?
Code bellow represents how I communicate between my page and extension. It doesn't work, onConnect.addListener doesn't trigger in myExtension, port.onMessage doesn't trigger in myExtension nor in my webPage.
https://localhost:8000/myPage.html:
var port = chrome.runtime.connect("ppibnonicgkeojloifobdloaiajedhgg"); // this is extensionId I got from chrome://extension
port.onMessage.addListener(function (event) {
console.log(event);
});
port.postMessage({type: 'PYCHAT_SCREEN_SHARE_PING', text: 'start'});
background.js from my extension:
chrome.runtime.onConnect.addListener(function(port) {
console.log("Connected from new port ", port);
port.onMessage.addListener(function(msg) {
console.log("Got new message ", msg);
port.postMessage({type: "PYCHAT_SCREEN_SHARE_PING_RESPONSE", data: "successs"});
});
});
manifest.json:
{
"name": "test",
"description": "test",
"version": "1.0.0",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": [
"desktopCapture",
"tabs"
],
}
Thanks to #wOxxOm #rsanchez I should:
Use chrome.runtime.onMessageExternal in background.js
Add externally_connectable to manifest.json
https://localhost:8000:
var port = chrome.runtime.connect("ppibnonicgkeojloifobdloaiajedhgg");
port.onMessage.addListener(function (event) {
console.log(event);
});
port.postMessage({type: 'PYCHAT_SCREEN_SHARE_PING', text: 'start'});
manifest.json
{
"name": "test",
"description": "test",
"version": "1.0.0",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": [
"desktopCapture",
"tabs"
],
"externally_connectable": {
"matches": ["https://localhost:8000"]
}
}
background.js:
chrome.runtime.onConnectExternal.addListener(function(port) {
port.onMessage.addListener(function(msg) {
console.log("it works")
port.postMessage({type: "PYCHAT_SCREEN_SHARE_PING_RESPONSE", data: "successs"});
});
});
I'm very much new to the whole chrome extensions world.
I've read through the tutorial "hello world" pages and tried to gain an understanding of content_scripts and background.html - but I may have overdosed and can't seem to find an answer to something I'm sure is a simple task.
In a tab a site contains the following Hidden HTML:
<div class="XYZ">
<input id="form_ID" type="hidden" value="REF_CODE#Product_CODE#Product Name#">
</div>
What I'm trying to figure out is how I can Display the
RefCode
ProductCode
Product Name
In a popup.html
I'm not looking at editing the html or manipulating it in any way.. it is strictly just displaying the hidden HTML - in an easy to read Popup.
Hope that makes sense..
Thanks in Advance.
UPDATE:
Popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
Content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
document.getElementById("productID");
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
manifest.json
{
// Required
"name": "WP Debug",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "icon.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "icon.png", // optional
"default_title": "WP Debug", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
Your popup needs to send a message to your content script which then gathers up the hidden field info and sends the response back to the popup.
Here is an example:
popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
//TODO: Get real values to send from page
//e.g. document.getElementById("someid") etc
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
mainfest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
See documentation: http://code.google.com/chrome/extensions/messaging.html