I want to send a message to the content script, when the user selects a context menu item. The content script will then, based on the message, format the webpage as required.
I was unable to do so and I have been able to locate the problem to the code responsible for sending the message (in the context menu script) or the one responsible for receiving message (in the content script).
Below, I try to present a simplified version of the code that tries to duplicate the problem:
manifest.json
{
"manifest_version": 2,
"name": "MCVE for SO",
"version": "1",
"description": "Demonstrate message passing from context menu to content script",
"author": "Nityesh Agarwal",
"permissions": [
"tabs",
"activeTab",
"contextMenus"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["markr.js"]
}
],
"background": {
"scripts": ["backgroundContextMenus.js"]
}
}
backgroundContextMenus.js:
chrome.runtime.onInstalled.addListener(function(){
chrome.contextMenus.create({"title": "Testing",
"contexts": ["selection"],
"id": "testing"});
});
chrome.contextMenus.onClicked.addListener(function(info, tab){
console.log("testing..");
console.log("Before sending the bold message");
chrome.tabs.sendMessage(tab.id, {changeParameter: "bold"});
console.log("After sending the bold message");
});
markr.js:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse){
console.log("Text toggled bold");
});
Upon selecting the context menu item, the console shows these messages:
backgroundContextMenus.js:8 testing..
backgroundContextMenus.js:9 Before sending the bold message
backgroundContextMenus.js:11 After sending the bold message
So, as you may notice, there is no log saying something like
Text toggled bold
This means that the code inside the markr.js file isn't getting executed. Therefore, I suspect that there must be something wrong with the code responsible for sending message: chrome.tabs.sendMessage(tabs[0].id, {changeParameter: "bold"});)
Here's another code snippet which I tried to duplicate but it gave the same problem - https://stackoverflow.com/a/14473739/7082018
I am unable to figure out what exactly is wrong with it. It would be of great help if someone could help tell me how I might be able to successfully pass messages between the context menu and the content page.
Taking a cue from this answer I modified my backgroundContextMenus.js as follows:
function ensureSendMessage(tabId, message, callback){
chrome.tabs.sendMessage(tabId, {ping: true}, function(response){
if(response && response.pong) { // Content script ready
chrome.tabs.sendMessage(tabId, message, callback);
} else { // No listener on the other end
console.log("Injecting script programmatically");
chrome.tabs.executeScript(tabId, {file: "markr.js"}, function(){
if(chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
throw Error("Unable to inject script into tab " + tabId);
}
// OK, now it's injected and ready
console.log("Sending msg now");
chrome.tabs.sendMessage(tabId, message, callback);
});
}
});
}
chrome.runtime.onInstalled.addListener(function(){
chrome.contextMenus.create({"title": "Testing",
"contexts": ["selection"],
"id": "testing"});
});
chrome.contextMenus.onClicked.addListener(function(info, tab){
ensureSendMessage(tab.id, {greeting: "hello"});
});
Then I modified the markr.js as follows:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if(request.ping){
sendResponse({pong: true});
return;
}
console.log("Text toggled bold");
});
Now the console logs are exactly what one may expect:
Console log:
markr.js:11 Text toggled bold
Remember that this log is present console log of the webpage's devtools and not the background script's inspect views.
Related
I know this this has been asked in numerous posts but honestly I don't get them. I am new to JavaScript, Chrome Extensions and everything and I have this class assignment.
So I need to make a plugin that would count DOM objects on any given page using Cross Domain Requests.
I've been able to achieve this so far using Chrome Extension API's.
Now the problem is I need to show the data on my popup.html page from the contentScript.js file.
I don't know how to do that I've tried reading the documentation but messaging in chrome I just can't understand what to do.
following is the code so far.
manifest.json
{
"manifest_version":2,
"name":"Dom Reader",
"description":"Counts Dom Objects",
"version":"1.0",
"page_action": {
"default_icon":"icon.png",
"default_title":"Dom Reader",
"default_popup":"popup.html"
},
"background":{
"scripts":["eventPage.js"],
"persistent":false
},
"content_scripts":[
{
"matches":["http://pluralsight.com/training/Courses/*", "http://pluralsight.com/training/Authors/Details/*", "https://www.youtube.com/user/*", "https://sites.google.com/site/*", "http://127.0.0.1:3667/popup.html"],
"js":["domReader_cs.js","jquery-1.10.2.js"]
//"css":["pluralsight_cs.css"]
}
],
"permissions":[
"tabs",
"http://pluralsight.com/*",
"http://youtube.com/*",
"https://sites.google.com/*",
"http://127.0.0.1:3667/*"
]
popup.html
<!doctype html>
<html>
<title> Dom Reader </title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
<body>
<H1> Dom Reader </H1>
<input type="submit" id="readDom" value="Read DOM Objects" />
<div id="domInfo">
</div>
</body>
</html>
eventPage.js
var value1,value2,value3;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action == "show") {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.pageAction.show(tabs[0].id);
});
}
value1 = request.tElements;
});
popup.js
$(function (){
$('#readDom').click(function(){
chrome.tabs.query({active: true, currentWindow: true}, function (tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "readDom"});
});
});
});
contentScript
var totalElements;
var inputFields;
var buttonElement;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse){
if(request.action == "readDom"){
totalElements = $("*").length;
inputFields = $("input").length;
buttonElement = $("button").length;
}
})
chrome.runtime.sendMessage({
action: "show",
tElements: totalElements,
Ifields: inputFields,
bElements: buttonElement
});
Any help would be appreciated and please avoid any noobness I did :)
Although you are definitely in the right direction (and actually pretty close to the end), there are several (imo) bad practises in your code (e.g. injecting a whole library (jquery) for such a trivial task, declaring unnecessary permissions, making superflous calls to API methods etc).
I did not test your code myself, but from a quick overview I believe that correcting the following could result in a working solution (although not very close to optimal):
In manifest.json: Change the order of the content scripts, putting jquery first. According to the relevant docs:
"js" [...] The list of JavaScript files to be injected into matching pages. These are injected in the order they appear in this array.
(emphasis mine)
In contentscript.js: Move the chrome.runtime.sendMessage({...}) block inside the onMessage listener callback.
That said, here is my proposed approach:
Control flow:
A content script is injected into each page matching some criteria.
Once injected, the content scripts send a message to the event page (a.k.a. non-persistent background page) and the event page attaches a page-action to the tab.
As soon as the page-action popup is loaded, it sends a message to the content script, asking for the info it needs.
The content script processes the request, and responds so the page-action popup can display the info.
Directory structure:
root-directory/
|__img
|__icon19.png
|__icon38.png
|__manifest.json
|__background.js
|__content.js
|__popup.js
|__popup.html
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"offline_enabled": true,
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.stackoverflow.com/*"],
"js": ["content.js"],
"run_at": "document_idle",
"all_frames": false
}],
"page_action": {
"default_title": "Test Extension",
//"default_icon": {
// "19": "img/icon19.png",
// "38": "img/icon38.png"
//},
"default_popup": "popup.html"
}
// No special permissions required...
//"permissions": []
}
background.js:
chrome.runtime.onMessage.addListener((msg, sender) => {
// First, validate the message's structure.
if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
// Enable the page-action for the requesting tab.
chrome.pageAction.show(sender.tab.id);
}
});
content.js:
// Inform the background page that
// this tab should have a page-action.
chrome.runtime.sendMessage({
from: 'content',
subject: 'showPageAction',
});
// Listen for messages from the popup.
chrome.runtime.onMessage.addListener((msg, sender, response) => {
// First, validate the message's structure.
if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
// Collect the necessary data.
// (For your specific requirements `document.querySelectorAll(...)`
// should be equivalent to jquery's `$(...)`.)
var domInfo = {
total: document.querySelectorAll('*').length,
inputs: document.querySelectorAll('input').length,
buttons: document.querySelectorAll('button').length,
};
// Directly respond to the sender (popup),
// through the specified callback.
response(domInfo);
}
});
popup.js:
// Update the relevant fields with the new data.
const setDOMInfo = info => {
document.getElementById('total').textContent = info.total;
document.getElementById('inputs').textContent = info.inputs;
document.getElementById('buttons').textContent = info.buttons;
};
// Once the DOM is ready...
window.addEventListener('DOMContentLoaded', () => {
// ...query for the active tab...
chrome.tabs.query({
active: true,
currentWindow: true
}, tabs => {
// ...and send a request for the DOM info...
chrome.tabs.sendMessage(
tabs[0].id,
{from: 'popup', subject: 'DOMInfo'},
// ...also specifying a callback to be called
// from the receiving end (content script).
setDOMInfo);
});
});
popup.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h3 style="font-weight:bold; text-align:center;">DOM Info</h3>
<table border="1" cellpadding="3" style="border-collapse:collapse;">
<tr>
<td nowrap>Total number of elements:</td>
<td align="right"><span id="total">N/A</span></td>
</tr>
<tr>
<td nowrap>Number of input elements:</td>
<td align="right"><span id="inputs">N/A</span></td>
</tr>
<tr>
<td nowrap>Number of button elements:</td>
<td align="right"><span id="buttons">N/A</span></td>
</tr>
</table>
</body>
</html>
You can use localStorage for that. You can store any data in a hash table format in browser memory and then access it any time. I'm not sure if we can access localStorage from the content script (it was blocked before), try to do it by yourself. Here's how to do it through you background page (I pass data from content script to background page first, then save it in localStorage):
in contentScript.js:
chrome.runtime.sendMessage({
total_elements: totalElements // or whatever you want to send
});
in eventPage.js (your background page):
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse){
localStorage["total_elements"] = request.total_elements;
}
);
Then you can access that variable in popup.js with localStorage["total_elements"].
Maybe you can access localStorage directly from the content script in modern browsers. Then you don't need to pass the data through your background page.
Nice reading about localStorage: http://diveintohtml5.info/storage.html
I will give you a simple solution
The question is how to send message from content script to popup and not popup to content script
In popup you have to send message from popup
document.addEventListener('DOMContentLoaded', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type:"msg_from_popup"}, function(response){
alert(response)
});
});
})
In content script you have to add event listener but the catch is you have to return true this means you can use sendResponse asynchronously if you dont mention return true it will work synchronously you have to immediately return sendResponse message
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request["type"] == 'msg_from_popup'){
console.log("msg receive from popup");
sendResponse("msg received and sending back reply");// this is how you send message to popup
}
return true; // this make sure sendResponse will work asynchronously
}
);
I created a simple chrome extension with the following data but for some reason it is not working all the time, there are times which I need to click on the extension button for it to work next time in the current tab.
I am unable to understand why.. it should ALWAYS work when you click on a tab and activate it (even when you create a new tab - it become activated and should run do-something.js
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Test",
"version": "1",
"browser_action": {
"default_icon": "icon.png",
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"activeTab",
"tabs"
]
}
background.js
chrome.tabs.onActiveChanged.addListener(function () {
chrome.tabs.executeScript({
file: 'do-something.js'
});
});
do-something.js
function createNotification() {
var notification = document.createElement('div');
Object.assign(notification.style, {
position: 'fixed',
zIndex: 10000,
textAlign: 'center',
width: '100%',
background: '#f5ae20',
padding: '5px',
top: 0,
left: 0
});
notification.innerHTML = `Test`;
document.body.appendChild(notification);
setTimeout(function() {
notification.remove();
}, 4000);
return notification;
}
createNotification();
Why is it not working all the time?
there is some issue with your code. do-something.js should be mentioned in the manifest file otherwise chrome will not find anything, you can put is as content script, background script or web accessible resource.
But if you put it as content script than it will run every time when the page will load (according) to your current code.
Here is my approach
I put the do-something.js in content script and made a communication channel between background js and content script when in the background it finds that active tab has changed then send a message to content script and display the notification
message passing from background
//listener for detecting tab change
chrome.tabs.onActiveChanged.addListener(function () {
console.log("tab changed");
//query about the active tab and get the tab id
//if you add debug point here it will throw exception because debugger is the current active window , which doesnot have tab
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
//send the message to the content sctipt
chrome.tabs.sendMessage(tabs[0].id, "showNotification", null);//here null is the callback
});
});
Message reception on content script
chrome.runtime.onMessage.addListener(
function (message, sender, sendResponse) {
//you can receive different type of message here
if (message == "showNotification") {
createNotification();
}
});
I have added a github repo for you, you can find more details there.
https://github.com/pfrng/tabChangeListener
Thanks
I am writing my First Chrome Plugin and I just want to get some text present on the current webpage and show it as a alert when i click the Extension. Lets say I am using any any webpage on www.google.com after some Search query, Google shows something like "About 1,21,00,00,000 results (0.39 seconds) " . I want to show this Text as an alert when i execute my plugin. This is what i am doing.
here is the manifest.json that i am using
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.google.com/*"],
"js": ["content.js"]
}],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Here is my popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("checkPage").addEventListener("click", handler);
});`
function handler() {
var a = document.getElementById("resultStats");
alert(a.innerText); // or alert(a.innerHTML);
}
Here is my content.js
// Listen for messages
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
// If the received message has the expected format...
if (msg.text === 'report_back') {
// Call the specified callback, passing
// the web-page's DOM content as argument
sendResponse(document.all[0].outerHTML);
}
});
Here is my background.js
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?google\.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...
chrome.browserAction.onClicked.addListener(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);
}
});
1) run content scrip after document ready ** check "run_at"
"content_scripts": [{
"run_at": "document_idle",
"matches"["*://*.google.com/*"],
"js": ["content.js"]
}],
2) on click of extension make another js to run( popup js). The popup js has access to the ( open page document)
// A function to use as callback
function doStuffWithDom() {
//console.log('I received the following DOM content:\n' + domContent);
//get tabID when browser action clicked # tabId = tab.id
chrome.tabs.executeScript(tabId, {file: "js/popup.js"});
}
3) In popup JS simple you can set alert
var a = document.getElementById("resultStats");
alert(a.innerText); // or alert(a.innerHTML);
Just remove "default_popup" part in manifest.json, as you have listened to chrome.browserAction.onClicked event in background page. They can't live at the same time.
So, I need to pass messages from popup to content and vice versa. Currently here is what I am doing now, but this does not work how it's supposed to work:
manifest.json:
{
// Required
"manifest_version": 2,
"name": "Extension name",
"version": "0.1",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["content.js"]
}
],
"browser_action" : {
"default_title" : "Extension name",
"default_popup" : "popup.html"
},
"permissions": [
"tabs",
"*://*/*",
"contextMenus"
]
}
popup.js
var port = "";
window.onload = function()
{
document.getElementById("captureImage").onclick = captureImage;
}
function captureImage(isBig = true)
{
chrome.tabs.query({'active': true}, function (tabs) {
port = chrome.tabs.connect(tabs[0].id, {name: "Besada"});
port.onMessage.addListener(function(msg) {
alert(msg.message);
});
port.postMessage({message: "getCoords"});
});
}
and content.js
chrome.runtime.onConnect.addListener(function(port){
port.onMessage.addListener(function(msg) {
});
port.postMessage({message: "hello!"}); // this message I receive
document.onmouseup = function(e) {
port.postMessage({message: "hello!"}); // this message produces an error
};
});
What I need is message to be sent when user releases the left mouse button. Here is what happens: when I am clicking a button in my popup.html, the alert with the text "Hello" shows, but when I am clicking anywhere in the page after that, I am getting an error: Uncaught Error: Attempting to use a disconnected port object
What am I doing wrong and how can I fix this?
My guess the port is disconnecting when popup closes when I click on page, but I'm not really sure about this.
The popup ceases to exist as a document when you click elsewhere. It's like a tab that has closed. As such, there's no longer anything to communicate to.
The proper way to fix it is to communicate with the background page instead, or use the non-volatile chrome.storage. Then, when the popup is opened, you can use either information source to show content.
I'm trying to create a Chrome extension that displays the current page's DOM in a popup.
As a warmup, I tried putting a string in getBackgroundPage().dummy, and this is visible to the popup.js script. But, when I try saving the DOM in getBackgroundPage().domContent, popup.js just sees this as undefined.
Any idea what might be going wrong here?
I looked at this related post, but I couldn't quite figure out how to use the lessons from that post for my code.
Code:
background.js
chrome.extension.getBackgroundPage().dummy = "yo dummy";
function doStuffWithDOM(domContent) {
//console.log("I received the following DOM content:\n" + domContent);
alert("I received the following DOM content:\n" + domContent);
//theDomContent = domContent;
chrome.extension.getBackgroundPage().domContent = domContent;
}
chrome.tabs.onUpdated.addListener(function (tab) {
//communicate with content.js, get the DOM back...
chrome.tabs.sendMessage(tab.id, { text: "report_back" }, doStuffWithDOM); //FIXME (doesnt seem to get into doStuffWithDOM)
});
content.js
/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
/* If the received message has the expected format... */
if (msg.text && (msg.text == "report_back")) {
/* Call the specified callback, passing
the web-pages DOM content as argument */
//alert("hi from content script"); //DOESN'T WORK ... do we ever get in here?
sendResponse(document.all[0].outerHTML);
}
});
popup.js
document.write(chrome.extension.getBackgroundPage().dummy); //WORKS.
document.write(chrome.extension.getBackgroundPage().domContent); //FIXME (shows "undefined")
popup.html
<!doctype html>
<html>
<head>
<title>My popup that should display the DOM</title>
<script src="popup.js"></script>
</head>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Get HTML example w/ popup",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}],
"browser_action": {
"default_title": "Get HTML example",
"default_popup": "popup.html"
},
"permissions": ["tabs"]
}
You got the syntax of chrome.tabs.onUpdated wrong.
In background.js
chrome.tabs.onUpdated.addListener(function(id,changeInfo,tab){
if(changeInfo.status=='complete'){ //To send message after the webpage has loaded
chrome.tabs.sendMessage(tab.id, { text: "report_back" },function(response){
doStuffWithDOM(response);
});
}
})