We Keep Coding

Chrome extension: browser.runtime API results in "browser is not defined" error

I'm building a Chrome extension and want to access a background script global variable from the content script, so I'm using the browser runtime API to pass messages between the content and background scripts.
This results in "Uncaught ReferenceError: browser is not defined"
Image of error message
content script:
//alert for debugging purposes
alert("content.js is loaded.");
document.body.onLoad = sending;
function sending(){
//alert for debugging purposes
alert("content.js is loaded, and sending() has been called.");
//sends a Promise to the receiver
document.addEventListener('DOMContentLoaded', function() {
browser.runtime.sendMessage({
type: "getText"
}).then(function(message) {
alert("Value of text is: ", message.result);
});
}
background script:
//alert for debugging purposes
alert("background.js is loaded.");
//'text' is the variable I'm trying to access from content script.
var text = prompt("Why are you here on this page?","E.g: To watch Daniel Schiffman's first video.");
//add a listener for the message sent from the content script
browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.type == "getText") {
//alert for debugging purposes
alert("browser.runtime is working from background.js");
//send the response to content script
sendResponse({result: text});
}
});
Notes
I have tried replacing all appearances of browser.* with chrome.*. The error message disappears, but the alerts inside the browser.runtime functions don't appear when I refresh the page, meaning the sendMessage() and onMessage() did not execute.
Seeing other advice from Stack Overflow, I also tried this: var browser = browser || chrome;, which is essentially the same thing as above.
Both background.js and content.js have been added to my manifest.json

How to pass data from content script to popup.html?

I'm learning how to make chrome extensions. I have a content script that will obtain some data and I want to pass them to the popup.html page to display them on the popup DOM. I've read about the message passing in the Chrome documentation but I'm unable to make it work. Can anyone help me?
My code:
content script file: main.js
(function($){
$(document).ready(function(){
console.log('Extension Started!');
var el = $(document).find('#stories_tray');
var child = el.find('._827c');
$.each(child, function(i){
var div = $(child[i])
.find('._7h4p')
.attr('data-onkeypress');
var d = JSON.parse(div);
if( typeof d[0].a != 'undefined' ){
console.log(d[0].a[0].preloadImageURIs[0]);
var l = d[0].a[0].preloadImageURIs[0];
chrome.runtime.sendMessage({imageURIs: l}, function(response) {
console.log(response.farewell);
});
}
});
});
}(jQuery));
popup javascript file: popup.js
// window.onload = function(){
// $('.spinner-grow').delay('300')
// .css({'transition':'ease-out','display':'none'});
// }
(function($){
$(document).ready(function(){
console.log('Extension Started!');
chrome.runtime.onMessage.addListner(function(request, sender, sendResponse){
console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
console.log(request.imageURIs);
sendResponse({farwell: "ok"});
});
});
}(jQuery));
Maybe I'm doing something wrong with the code.
I get this errors in the console:
// content script console error
Error handling response: TypeError: Cannot read property 'farewell' of undefined
//popup.js console error
jQuery.Deferred exception: chrome.runtime.onMessage.addListner is not a function TypeError: chrome.runtime.onMessage.addListner is not a function:
Uncaught TypeError: chrome.runtime.onMessage.addListner is not a function
UPDATE
I've managed how to pass the message from the content script to the popup.js but I need a way to hold the message until the user click on the extension icon. How can I achieve also this?

In general, it will not work to send a message from a content script to a popup unless you know the popup is open: the popup does not exist until you open it.
Given this, it will likely be most decoupled to have your content script send its message to a persistent background (which is the default btw) and serve as the repository for your messages until the popup requests them.
background.js
const messageQueue = [];
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// Arbitrary string allowing the background to distinguish
// message types. You might also be able to determine this
// from the `sender`.
if (message.type === 'from_content_script') {
messageQueue.push(message);
} else if (message.type === 'from_popup') {
sendResponse(messageQueue);
}
});
Now from content script, send chrome.runtime.sendMessage({imageURIs: l, type: 'from_content_script'}... and from the popup send
chrome.runtime.sendMessage({type: 'from_popup'}, (response) => {
// do stuff with response (which will be the value of messageQueue
// sent from background.js).
});
Of course the strings 'from_popup' and 'from_content_script' mean nothing; they are just there for clarity.
If you need the popup to initiate the flow, you will need to:
send a message from the popup
to the background, to send a message to the content scripts
which should respond to the background
which should respond to the popup

Chrome runtime have not onMessage method please see this link,hope this will hep you

Chrome Extension: How to run my content.js in actual webpage instead of popup.html

I have a extension that is doing all kind of stuff with any given website. Everything worked well before i added popup window in purpose to use it as some kind of UI for the extension. After i have found it impossible to get my code run anywhere outside of that popup..
This sample is from my previous unsuccessful try:
HTML is just a start (starts initSession function) and stop button with access to content.js. I'am looking for solution (if there is a one) where i don't have to inject the actual page and could handle this with messages somehow..
content.js:
function initSession() {
window.close(); //popup..
chrome.runtime.sendMessage({
message: 'popup_closed'
}, function(response) {
var response = response.message;
if(response === "ready_to_record")
startRecording();
});
}
function startRecording(){
createListeners();
}
//background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse, tab) {
if (request.message == "popup_closed")
sendResponse({message: "ready_to_record"});
});

chrome extension - passing data from background to custom html page

Creating browser extension where I have to open new tab from background.js and pass JSON data to this new tab. In new tab I am manipulating/rendering DOM using passed JSON data.
Below is part of my background.js where I create new tab with custom URL and send JSON data object
....
var analyticsUrl = chrome.extension.getURL("analytics.html");
chrome.tabs.create({ url: analyticsUrl, selected: true }, sendDataToAnalytics);
function sendDataToAnalytics(tab)
{
console.log(JSON.stringify(txnDataJSON));
chrome.tabs.sendMessage(tab.id, {"action" : "renderChartsTxns", "txns" : JSON.stringify(txnDataJSON)});
}
....
My custom analytics.html page has
<script src="analytics.js" type="text/javascript"></script>
And analytics.js looks like below
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.action == "renderChartsTxns")
{
// JSON parsing and analytics.html DOM processing
});
Problem is, my analytics.js listener is never receiving any messages. I've confirmed that background.js is sending JSON message as expected (using background page debugging)
BTW, analytics.js/html are not registered as part of manifest.json file but these files are part of extension package.
I did this setup today morning and everything was working properly for few hours (was able to receive JSON data in analytics.js), not sure what changed later and I lost message receiving in analytics.js (for debugging I tried clearing browser cache, uninstall and reinstalled chrome and much more but no luck yet!)

The callback of chrome.tabs.create returns as soon as the tab is created, not after it fully loads.
As such, you have a race condition: your message is potentially sent before the listener is initialized. Since it's a race condition, it can sometimes work.
The correct logic here would be to send a message requesting data from the newly opened tab, and use sendResponse to pass that data from the background.
// analytics.js
chrome.runtime.sendMessage({"action" : "getTxns"}, function(txns) {
// Process the data
});
// background.js
// Register this before opening the tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.action == "getTxns") {
sendResponse(txnDataJSON); // No need to serialize yourself!
}
});

Chrome Extension: Can't send message to tab with id of -1

I've checked numerous questions regarding message passing in a Chrome extension but I haven't found much specifically relating to this.
I'm using the chrome.devtools* APIs and I'm having trouble sending messages between content scripts when the developer toolbar is docked. Everything works fine when it is not docked i.e. floating.
Here's a brief example of what I'm doing.
devtools.js
chrome.devtools.panels.create("myExtension", "img/icon.png",
"/panel.html", function(extensionPanel) {
var myData; //this variable gets manipulated before a user
//clicks on the panel
extensionPanel.onShown.addListener(function(panelWindow) {
chrome.extension.sendMessage({greeting: "update my data", data: myData}, function(response) {});
});
});
Then in my background script (eventPage.js) I listen for this message and pass it on to panel.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.greeting == "update my data"){
chrome.tabs.sendMessage(sender.tab.id, {greeting: "show data", showResource: request.data}, function(response) {});
}
});
And then finally I listen for the 'show data' call in my panel.js (which is loaded from panel.html)
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.greeting == "show data") {
//do stuff with my data here
});
Essentially, I need to pass messages between devtools.js to panel.js but the only way to do it is by using the background script as an intermediary.
devtools.js -> background.js -> panel.js.
This actually works fine as long as the dev tools panel is not docked to the window. When it is docked I get an error because sendMessage() won't except a tab id of -1, which is what sender.tab.id equals when the dev tools are docked to the window. I also tried using chrome.tabs.connect - long lasting connections - but ran into the same problem.

I also just found out recently how to do this.
A technique used by "Google Pagespeed" is to get the tab id of the inspected window and pass it back and forth between the extension and background using a port.
Whenever you want to send the extension a message, you look for the tab id and get its port.
panel.js
// get the inspected windows tab id from the panel
var tabId = chrome.devtools.inspectedWindow.tabId;
// create the port
var port = chrome.extension.connect({name: 'connection'});
// keep track of the port and tab id on the background by
// sending the inspected windows tab id
port.postMessage(['connect', tabId])
eventPage.js
var activeListeners = {};
chrome.extension.onConnect.addListener(function(port) {
port.onMessage.addListener(function(message) {
if (message[0] === 'connect') {
// get the tab id
var tabId = message[1];
// save the reference to the port
activeListeners[tabId] = port;
// make sure we clean up after disconnecting (closing the panel)
activeListeners[tabId].onDisconnect.addListener(function() {
delete activeListeners[tabId];
});
}
});
});
This is not a very thorough explanation but I hope you get the point.