We Keep Coding

Chrome Extension Content-Script as Listener & Popup as Sender, But Gives Receiving End Does Not Exist

Answer Found
This extension is for google meet. What I have written in manifest.json is wrong, line "matches": ["*://*.meet.google.com/*"], should be "matches": ["*://meet.google.com/*"],
Original Question
I have this chrome extension, I want to let my contentScript.js to search for an element (tag) in a webpage when I press a button in popup.html. I set the sending message part in popup.js and the sending seems to work fine. But when I tried to receive it on the contentScript.js, console.log gives me Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
May someone please help me, any suggestions are welcome.
Code snippets:
popup.js
retrieveTabId();
function retrieveTabId() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
var activeTab = tabs[0];
console.log("tabID", activeTab.id);
tabId = activeTab.id;
});
}
document.getElementById("btn").addEventListener('click', function (){
chrome.tabs.sendMessage(tabId, {type: "listener"}, function(response) {
console.log((response.success));
});
console.log("tabID", tabId);
})
content-script.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.type == 'listener') {
try {
let textarea = document.getElementsByTagName('textarea');
if (textarea.length == 0) {
sendResponse({success: false});
}
else {
console.log('find node -- textarea' + textarea);
sendResponse({success: true});
}
}
catch (e){
console.log(e);
sendResponse({success: false});
}
}
}
);
manifest.json
{
"name": "name",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"permissions": ["storage", "activeTab", "scripting", "downloads", "notifications", "<all_urls>", "tabs"],
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": ["*://*.meet.google.com/*"],
"js": ["contentScript.js"]
}]
}

Error on calling Javascript APIs within Firefox extension

I am currently building a web extension and in the stage of porting between browsers. On moving from Chrome to Firefox I am coming against an issue in using the runtime.sendMessage API that allows me to talk between the content and background scripts.
The message code in the content script:
browser.runtime.sendMessage('d089938d-ba63-4c40-98ab-b8515db1bbca', { greeting: "screenshot-please" }, function (response) {
localStorage.setItem("image", response.farewell);
});
var image = localStorage.getItem("image");
The Background script:
var img = saved-image;
browser.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if(request.greeting === "screenshot-please"){
sendResponse({
farewell: img
});
}
}
);
and the manifest:
{
"description": "...",
"manifest_version": 2,
"name": "...",
"permissions": [
"find",
"tabs",
"activeTab",
"<all_urls>"
],
"applications": {
"gecko": {
"id": "..."
}
},
"background": {
"scripts": ["/JavaScript/moz-initialPopup.js"]
},
"content_scripts": [
{
"all_frames": true,
"matches": ["*://127.0.0.1:3000/*"],
"js": ["Javascript/dataGrab.js"]
}
],
"icons": {
"48": "..."
},
"browser_action": {
"browser_style": true,
"default_title": "...",
"default_icon": {
"48": "..."
}
},
"version": "1.0"
}
When in chrome (replace all instances of *browser with *chrome) this messaging system works fine. When in firefox, in the developer tools I get 'ReferenceError: browser is not defined'.
Can anyone assist me in why I would not be able to access the browser here?

Chrome extension throwing a "Cannot convert undefined or null to object" error

I'm building an extension that will store a token from a chrome tab (it will take the token once you finish loading that particular tab).
When running the extension (It is run by a press of the button) it is supposed to "get" the token and use it to create an ajax call.
This is a simple explanation of what it does; this is the code:
background.js :
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'h' }
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
manifest:
{
"name": "Page action by URL",
"version": "1.0",
"description": "Shows a page action for urls which have the letter 'g' in them.",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_icon": "images/icon32.png",
"default_title": "linkedin URL!",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js" : ["getToken.js"],
"run_at":"document_end"
}
],
"permissions": [
"storage",
"activeTab",
"tabs",
"<all_urls>",
"cookies",
"declarativeContent",
"http://*/*",
"https://*/*"
],
"icons" : {
"48" : "images/icon32.png",
"128" : "images/icon32.png"
},
"manifest_version": 2
}
getToken.js: [Content script]
if(document.getElementById('HrmsTkn')){
chrome.storage.local.set({ 'HrmsTkn': document.getElementById('HrmsTkn').value});
chrome.storage.local.get('HrmsTkn', function(result){
alert('Got it' + result.HrmsTkn);
});
}
and popup.js (button activation function):
$(function () {
$('#btnGetHtml').click(function () {
var token;
chrome.storage.local.get('HrmsTkn', function (items) {
if(items){
token = items.HrmsTkn;
}
});
try {
alert(token);
}
catch(e) {
}
});
});
I get the following error in devTools and undefined alerted once the button is clicked, also I checked the storage area of the extension using StorageAreaExtension which shows the extension has the value I'm trying to get.
And when I debug it, in the storage.local.get function, it throws the following error:
Lazy require of extension.binding did not set the binding field
extensions::lastError:82: Uncaught TypeError: Cannot convert undefined
or null to object{TypeError: Cannot convert undefined or null to
object
Any ideas why? I've looked up google for the past few days but did not find any reliable fix.

Chrome extension messaging from popup to content script

I'm trying to send a message from my popup.js to a content.js and I just don't get why it doesn't work.
Here is my set up:
manifest.json
{
"manifest_version": 2,
"name": "Form Builder",
"description": "This extension populates a form.",
"version": "0.1",
"content_scripts": [{
"all_frames": true,
"matches": ["http://*/*", "https://*/*"],
"js" : [
"/js/jquery/jquery.min.js",
"/js/formLoader.js",
"/js/content.js"
]
}],
"options_page": "/html/options.html",
"permissions": ["https://localhost:8443/",
"tabs", "activeTab", "storage", "background"
],
"icons": { "16": "/images/icons/wb_icon_16.png",
"48": "/images/icons/wb_icon_48.png",
"128": "/images/icons/wb_icon_128.png"
},
"browser_action": {
"default_popup": "/html/popup.html"
}
}
content.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
sendResponse("received message: " + request);
formLoader.setFormData(request, sendResponse);
// Why isn't this getting executed when I send a message from popup?
sendResponse("Thank you");
});
popup.js
var popup = {
// a few parts snipped out for brevity
sendMessage: function(message) {
chrome.tabs.sendMessage(tab.id, message, function(message) {
console.log(chrome.runtime.lastError);
popup.handleCallbacks(message);
});
},
handleCallbacks: function (message) {
console.log("handleCallbacks: " + message);
}
}
formLoader.js
var formLoader = {
init : function() {
$("#PostingBody").val("formLoader.init");
},
setFormData: function(data, callback) {
callback("[formLoader.js] got data: " + data);
}
}
formLoader.init();
When I do something like:
popup.sendMessage(data);
In my console I get:
Object {message: "Could not establish connection. Receiving end does not exist."}
handleCallbacks: undefined
Why isn't there a receiving end? What am I doing wrong with the listener in the content.js?

Thanks to:
This answer from another question
For Chrome 26+, use chrome.runtime.onMessage and chrome.runtime.sendMessage.
even though I'm positive I've found several pages and references that fail to mention this.

Chrome Extension Access Xively

How can I access a Xively Feed through chrome extension. I am building a simple extension which will block websites depending on the value that is currently displayed on my Xively Feed. However I unsure on how to access the Xively feed without Html, I've looked at the XivelyJS library which I have used before but in a HTML page. However my extension needs to be independent of HTML.
Code Below is my attempt at using XivelyJS however I would be appreciative of an easier or better method.
Background.js:
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
return {cancel: true};
},
{urls: ["*://www.facebook.com/*", "*://www.twitter.com/*"]},
["blocking"]);
// Set your API key first
// Get feed content
xively.setKey( "APIKEY" );
function ReadData(){
var reading = xively.datastream.get ("832936337", "Reading", callback (data));
console.log(reading);
console.log(data);
setTimeout(ReadData,3000);
}
ReadData();
Manifest.json:
{
"manifest_version": 2,
"name": "SiteBlockerFyp",
"description": "Block Respective Sites",
"version": "1",
"permissions": [
"webRequest",
"webRequestBlocking",
"*://www.facebook.com/*","*://www.twitter.com/*"
],
"content_scripts": [
{
"matches": ["*://www.facebook.com/*"],
"js": ["jquery.min.js", "xivelyjs.min.js"]
}
],
"background": {"scripts": ["background.js"]}
}

Found that I could access the values like so :
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
return {cancel: true};
console.log(details.url);
},
{urls: ["*://www.twitter.com/*"]},
["blocking"]);
// Set your API key first
// Get feed content
xively.setKey( "APIKEY" );
console.log("XIVELY LOADED");
var feedID = 832936337, // Feed ID
datastreamID = "Reading"; // Datastream ID
data = "null"; // Your element on the page
dataUpdated= "null";
console.log("READ ");
xively.datastream.get (feedID, datastreamID, function ( datastream ) {
data = datastream["current_value"];
console.log(data);
xively.datastream.subscribe( feedID, datastreamID, function ( event , datastream_updated ) {
dataUpdated = datastream_updated["current_value"] ;
console.log(dataUpdated);
});
});
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
console.log(tabs[0].url);
if (tabs[0].url == "*www.twitter.com*") {
alert("Twitter");
}
}
);
subscribing also gave me updates as they occurred. However using background.js as a background script in the manifest means it wont run across all pages so I still trying to figure this one out, Content-scripts is apparently the way to go.
{
"manifest_version": 2,
"name": "SiteBlockerFyp",
"description": "Block Respective Sites",
"version": "1",
"permissions": [
"webRequest",
"webRequestBlocking",
"*://www.twitter.com/*",
"tabs"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "xivelyjs.min.js", "background.js"]
}
]
}