Develop Reference

Error on chorme extension: Uncaught ReferenceError: window is not defined

I'm developing a Chrome Extension (don't have a lot experience with it), and I've the following code:
window.onload = function () {
validateCNPJ();
};
function validateCNPJ() {
document.querySelector('div[data-field-name="CNPJ"] > input').addEventListener('keydown', (bla) => {
let ble = bla.target.value;
console.log(ble.length)
if (ble.length > 17) {
bla.preventDefault()
bla.stopPropagation()
return
}
ble = ble.replace(/\D/g, "")
ble = ble.replace(/^(\d{2})(\d)/, "$1.$2")
ble = ble.replace(/^(\d{2}).(\d{3})(\d)/, "$1.$2.$3")
ble = ble.replace(/.(\d{3})(\d)/, ".$1/$2")
ble = ble.replace(/(\d{4})(\d)/, "$1-$2")
bla.target.value = ble;
})
}
I added window.load so that when the page loads, the validateCNPJ function is activated. That function validates a specific field in a form in real time.
The issue is that when I upload the extension it shows a error message saying:
Uncaught ReferenceError: window is not defined
I tested the code inside the function validateCPNJ in the console of the browser and it worked normally.
The manifest file is like this:
{
"name": "CRM Validation Extension",
"description": "Extension that validate fields of a opportunity",
"version": "0.1",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
}
}
What can I do to solve this issue?
Thanks!

I manage to solve the issue. Previously my manifest.json was like this:
{
"name": "CRM Validation Extension",
"description": "Extension that validate fields of a opportunity",
"version": "0.1",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
}
}
I changed the background object and replaced with the following:
"content_scripts":[
{
"matches": [
"<all_urls>"
],
"js": ["background.js"]
}
]
This fixed the issue I was having.

I cant seem to figure out what permissions I may be missing for my chrome extension. It works in developer mode but not on the chrome store

Running into a bit of an issue here after my extension has been published on the chrome store. The extension simply "busts" browser cache by appending a query param at the end of any url. It works fine if I upload the package directly to chrome locally for development but when the file is published on the chrome store (approved and all) it doesnt seem to work at all.
I am thinking that I might be missing some kind of permissions in the manifest but I am not certain.
The way that this is supposed to work is that you simply click on the extension icon and the background script fires off modifying the URL and reloading the page.
Thoughts would be much appreciated!
manifest.json
"manifest_version": 2,
"version": "1.0.1",
"name": "Cache Buster",
"description": "Allows a user to bust their cache without needing to type in the URL",
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
background script
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.query({active: true, lastFocusedWindow:true}, tabs => {
let url= tabs[0].url;
let busterDigits = [];
function findDigits() {
for (i =0; i < 4; i++) {
let n = Math.floor(Math.random() * 10);
busterDigits.push(n);
}
}
function checkParam() {
if ( url.includes("?") && !url.includes('beejBuster')) {
url = url + "&beejBuster=" + busterDigits.join("").toString();
} else if (url.includes("?") && url.includes('beejBuster')) {
url = url.split('beejBuster=')
url.pop()
url = url + 'beejBuster=' + busterDigits.join('').toString();
} else {
url = url + "?beejBuster=" + busterDigits.join("").toString();
}
}
findDigits();
checkParam();
console.log(url);
chrome.tabs.update({url: url})
})
});
});

Running chrome extension process while popup is closed

Basically I am trying to create an Auto Visitor Extension for Chrome to open a website's URL after some specific time. When I open the popup everything works fine but when the popup is close nothing works. I am trying to find out a method to run that Auto Visitor Extension even when the popup is close I have read multiple questions regarding this phenomena on Stack Overflow but none of them clarifies what I am looking for.
Here is my manifest file:
manifest.json
{
"manifest_version": 2,
"name": "Auto Visitor",
"description": "This extension will visit multiple pages you saved in extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"permissions": [
"activeTab",
"storage",
"tabs",
"http://*/",
"https://*/"
]
}
The background file that i want to run even when popup is close :
background.js
// this will work only when you denie the background script in manifest
chrome.runtime.onInstalled.addListener(function(details) {
var initTime = 5;
chrome.storage.local.set({"avtime": initTime}, function() {});
});
reloadMainTab();
function reloadMainTab() {
chrome.storage.local.get('avurl', function (result) {
var urlsToLoad = result.avurl;
console.log(urlsToLoad);
if(urlsToLoad==undefined){
// do nothing
}else{
var urlsArr = urlsToLoad.split(",");
chrome.storage.local.get('avtime', function (result) {
var thisTime = result.avtime;
/*
setting it to -1 because it gets incremented by 1
when it goes into getSelected method
*/
var index=-1;
setInterval(function(){
if(index < urlsArr.length-1){
chrome.tabs.getSelected(function (tab) {
// console.log('index in get selected'+index)
chrome.tabs.update(tab.id,{url: urlsArr[index]});
});
index++;
}else{
index=-1;
}
}, thisTime+"000");
});
}
});
}
any help would be really appreciated

Running a function in chrome extension on double click/select of a word

I am trying to fire a notification whenever I double click on a word/select it. Found several examples online but I still cannot get my example working:
Manifest:
{
"name": "hh",
"description": "hh!",
"manifest_version": 2,
"version": "0.0.0.1",
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*" ],
"js": [ "background.js" ],
"all_frames": true,
"run_at": "document_end"
}
],
"permissions": ["storage", "notifications"],
"icons": { "128": "neoprice.png" }
}
background.js
var listener = function(evt) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
displayPrice();
var range = selection.getRangeAt(0);
var text = range.cloneContents().textContent;
console.log(text);
}
};
document.addEventListener('dblclick', listener);
function displayPrice(){
chrome.notifications.create(getNotificationId(), {
title: "message.data.name",
iconUrl: 'hh.png',
type: 'basic',
message: "message.data.prompt"
}, function() {});
}
// Returns a new notification ID used in the notification.
function getNotificationId() {
var id = Math.floor(Math.random() * 9007199254740992) + 1;
return id.toString();
}
I was earlier adding the following but I saw people weren't using it, so I removed it
"app": {
"background": {
"scripts": ["background.js", "assets/jquery.min.js"]
}
},
What I am trying to achieve: Whenever they go to ANY page on selecting a word, it fires the function. Later, I wish to use this for a specific page. :)
Tried: How to keep the eventlistener real time for chrome extensions?
Chrome extension double click on a word
https://github.com/max99x/inline-search-chrome-ext
Both don't really work as I want them too. :(

Solution
It seems you are confused with background page and content script. Your background.js is a content script in fact, though its name is "background". While chrome.notifications api can be only called in background page, trying commenting displayPrice function will make your code work.
Next step
Take a look at above tutorials, wdblclick event triggers, use Message Passing to communicate with background page and call chrome.notications api in background page.
What's more
The following code is used in chrome apps rather than chrome extension.
"app": {
"background": {
"scripts": ["background.js", "assets/jquery.min.js"]
}
},

Javascript DOM Chrome Extension simple Script

I made an Extension for Firefox that random check all radio buttons & checkboxes on a website. Now I will make it for Chrome.
JS (inject.js):
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
function autoFill () {
for (i = 0; i < document.forms.length ;i++) {
for (j = 0; j < document.forms[i].length ;j++) {
if (document.forms[i].elements[j].type == "radio") {
start = j;
lastName = document.forms[i].elements[j].name;
while (j < document.forms[i].length - 1 && lastName == document.forms[i].elements[j+1].name) {
j++;
}
rand = randomFromTo(start, j);
document.forms[i].elements[rand].checked = true;
}
if (document.forms[i].elements[j].type == "checkbox") {
start = j;
lastName = document.forms[i].elements[j].name;
while (j < document.forms[i].length - 1 && lastName == document.forms[i].elements[j+1].name) {
j++;
}
rand = randomFromTo(start, j);
document.forms[i].elements[rand].checked = true;
}
}
}
}
autoFill();
So I read a lot about inject.js and Content Scripts so I tried both. And made it like this.
{
"name": "Auto Check Radio \u0026 Checkbox",
"version": "0.0.1",
"manifest_version": 2,
"description": "",
"homepage_url": "",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"browser_action": {
"default_icon": "icons/icon16.png",
"default_title": "Autocheck",
"default_popup": "src/browser_action/browser_action.html"
},
"permissions": [
"tabs",
"notifications",
"http://*/",
"http://*/*",
"https://*/*"
],
"content_scripts": [{
"matches": ["https://*/*", "http://*/*"],
"js": ["src/inject/inject.js"],
"run_at": "document_end"
}],
"web_accessible_resources": ["src/inject/inject.js"],
"js": ["src/inject/inject.js"]
}
]
}
But I've got no idea how I can run the code. On Firefox it is much easier.
I don't need any background.html or browser_action.html
I only want to run the script - in the current tab - by clicking the icon.
Chould anyone give me a tip where i place my script?

Please read the Overview document first. Especially the Architecture part.
Any code that interacts with the page DOM must be in a Content Script. You've already put the code in src/inject.js.
Now, you don't need any UI to pop up when you click the button, so drop the "default_popup" item from the manifest and its HTML.
You also don't want your code to randomly execute when a tab loads. That's what "content_scripts" section in the manifest is about, so simply delete it.
Finally, you don't need a background HTML file. They have been replaced by autogenerated pages that are built from a list of scripts. So:
"background": {
"scripts": ["src/bg/background.js"]
},
"browser_action": {
"default_icon": "icons/icon16.png",
"default_title": "Autocheck"
},
Now, the only job of the background script is to register a handler for the button click. This is done through browserAction API:
// src/bg/background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "src/inject/inject.js"});
});
That's it, at this point it should work.
Now, to trim down the fat.
You don't need a persistent background page, since all it does is keeping simple event listeners that don't save any kind of state information. You can safely add "persistent": false to the manifest.
Your permissions are a massive overkill. There's a handy activeTab permission that gives you access to the current page if your code is invoked by, say, browser action button press.
In fact, that is the only permission your code needs. It will take care of executeScript call.
"permissions" : ["activeTab"],