Develop Reference

Problem stopping CORB from blocking requests

I have a Chrome extension that scrapes some values from a webpage based on some query selectors that are provided via an API call.
Relevant portion of manifest.json:
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/jquery.min.js"]
}
],
"permissions": [
"<all_urls>",
"storage",
"activeTab"
]
}
js/background.js:
The idea here is that if a user has entered an atsmap value on their options page, we should perform an API call.
chrome.storage.sync.get(['atsmap'], function(result) {
if (result.atsmap) {
var url = "https://myurl.com/AtsMapping.aspx?AtsCode=" +
encodeURIComponent(result.atsmap)
fetch(url).then(r => r.text()).then(text => {
console.log(text);
response = JSON.stringify(text);
chrome.storage.sync.set({"fieldmapping": response}, function() {
console.log('Fieldmapping is set to ' + response);
});
})
}
return true;
});
This portion appears to be working properly, here is the console from the background page:
In popup.js (which is included at the bottom of popup.html), I call an inject.js script after the DOM is loaded:
// DOM Ready
$(() => {
'use strict';
chrome.tabs.executeScript({file: 'js/inject.js'}, () => {
// We don't need to inject code everwhere
// for example on chrome:// URIs so we just
// catch the error and log it as a warning.
if (chrome.runtime.lastError) {
console.warn(chrome.runtime.lastError.message);
}
});
// injected code will send an event with the parsed data
chrome.runtime.onMessage.addListener(handleInjectResults);
});
And finally, in js/inject.js, I get the value of fieldmapping from storage and attempt to use it:
(function () {
'use strict';
let fieldmap;
let message;
console.log("test");
chrome.storage.sync.get(['atsmap'], function(result) {
if (result.atsmap) {
chrome.storage.sync.get(['fieldmapping'], function(result) {
console.log('Value currently is ' + result.fieldmapping);
fieldmap = JSON.parse(result.fieldmapping);
console.log(fieldmap);
// <key> : { // ID of input on popup.js
// selector: <selector> // DOM selector of value in page
// value: <value> // value to use in popup.js
// }
if(fieldmap.AtsMapping[4].atsMapNotes == 'John Smith (2)') {
message = {
txtLName: {
selector: fieldmap.AtsMapping[6].lastName,
value: null
},
When I go to a demo page that I've setup for the scraping, then click my extension icon, rather than scraping the page for the form values, I get the following in the console:
I don't understand how, on inject.js line 32, I can console.log(fieldmap); and get what appears to be the proper response, and yet on inject.js line 39, the same fieldmap is undefined.
Any suggestions would be helpful as I'm completely lost here.

chrome.webNavigation.onBeforeNavigate event is not executed immediately after window.location change

Note that I'm using Babel + Webpack to generate ES2017 code to ES5 (I'm using async await functionalities and wiling to use same code with less changes in old browsers).
My goal is here to execute # of codes on a specific tab. Those codes includes, form submits, clicking on links etc.. which redirects to a new webpage. What ever the code should be paused until the page is loaded doesn't matter what is the page it's navigating/redirecting. So to simulate the redirecting I'm using window.location = "https://facebook.com".
Every thing in short. The expected behavior is,
I open tab with url: 'https://google.com'
Change the window location to https://facebook.com
Display alert message once facebook loaded completely.
I have below helper classes with me.
tabs.js
/** Tabs class will provide promisify chrome.tabs functions */
export default class Tabs {
/** Creates a new tab using passed configurations
* #param {Object} config
* {Number} windowId
* {Number} index
* {String} url
* {Boolean} active
* {Boolean} pinned
* {Number} openerTabId ID of the tab that opened current tab. should be in the same window.
* #returns {Promise}
*/
static create(config) {
// Return new promise
return new Promise((resolve, reject) => {
// Creating new tab
chrome.tabs.create(config, (tab) => {
// Error
if (chrome.runtime.lastError)
reject(chrome.extension.lastError);
// Success
else
resolve(tab);
});
});
}
/**
*
* #param {Number} id
* #param {Object} config
* {String} code // javascript or css code to inject
* {String} file // javascript or css file to inject
* {Boolean} allFrames // inject to all frames
* {Number} frameId // frame index to inject
* {Boolean} matchAboutBlank // inject tp about:blank pages
* {String} runAt // "document_start" or "document_end" or "document_idle"
* #returns {Promise}
*/
static execute(id, config) {
// Return a new promise
return new Promise((resolve, reject) => {
// Execute a script
chrome.tabs.executeScript(id, config, (results) => {
// Error
if (chrome.runtime.lastError)
reject(chrome.runtime.las2tError);
// Success
else{
resolve(results);
// print "execute" just to get the idea when it's printed.
console.log('executed: ' + config.code);
}
});
})
}
/**
*
* #param {Number} id
* #returns {Promise}
*/
static get(id) {
// Return new promise
return new Promise((resolve, reject) => {
// Get tab
chrome.tabs.get(id, (tab) => {
// Error
if(chrome.runtime.lastError)
reject(chrome.runtime.lastError);
// Success
else
resolve(tab);
});
});
}
}
process.js
export default class Process {
/** Pause for a given time
* #param ms
* #returns {Promise}
*/
static timeout(ms) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, ms);
});
}
}
Finally my background.js is used to listen to webNavigation.onBeforeNavigate and webNavigation.onCompleted and to execute script.
Note that onBeforeNavigate and onCompleted provide details about each and every tab but when i run this i only have one tab. so I'm directly initializing isTabStatus without tabId validation.
background.js
import Tabs from "./tab/tabs";
import Process from "./commons/process";
// holds the status of new tab.
let isTabStatus = "loading";
/**
* Listeners
*/
chrome.webNavigation.onBeforeNavigate.addListener((info) => {
if(info.frameId === 0) {
console.log('before navigation status: loading ' + info.url);
isTabStatus = "loading";
}
});
chrome.webNavigation.onCompleted.addListener((info) => {
if(info.frameId === 0) {
console.log('on completed status: completed ' + info.url);
isTabStatus = "completed";
}
});
async function run() {
let tab = await Tabs.create({
url: "https://www.google.com"
});
let tabId = tab.id;
await waitUntilLoaded();
await Tabs.execute(tabId, {
code: "window.location = 'https://facebook.com'",
runAt: "document_idle"
});
await waitUntilLoaded();
await Tabs.execute(tabId, {
code: "alert('hello world')"
});
}
async function waitUntilLoaded () {
while(isTabStatus === "loading") {
await Process.timeout(400);
console.log('waiting');
}
}
run();
So, the expected behavior is,
create new tab
navigate to https://google.com
navigate to https://facebook.com
alert hello world.
But it actually does is,
create new tab
navigate to https://google.com
alert hello world
navigate to https://facebook.com
Finally the console logs as below.
before navigation status: loading https://www.google.com/
waiting
on completed status: completed https://www.google.lk/?gfe_rd=cr&ei=VIueWa2uFZOCuATNtJTIBA
waiting
execute: window.location = 'https://facebook.com'
before navigation status: loading https://facebook.com/
execute: alert('hello world')
on completed status: completed https://www.facebook.com/
In here alert has completed executed after onBeforeNavigate but actually alert message is displayed in the google page. After and only after I click ok (alert message ok), It redirects to facebook.
It's clear if i add console.log before alert as below.
await waitUntilLoaded();
console.log('****');
await Tabs.execute(tabId, {
code: "alert('hello world')"
});
Then the final log will be,
before navigation status: loading https://www.google.com/
waiting
on completed status: completed https://www.google.lk/?gfe_rd=cr&ei=TY-eWb_0D6baugTMqqWACQ
waiting
execute: window.location = 'https://facebook.com'
****
before navigation status: loading https://facebook.com/
execute: alert('hello world')
on completed status: completed https://www.facebook.com/
As you can see alert get executed immediately after window.location change. even before onBeforeNavigation callback
Find other details below.
mainfest.json
{
"manifest_version": 2,
"name": "Tax Executer",
"description": "",
"version": "1.0",
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "views/popup.html"
},
"permissions": [
"webNavigation",
"webRequest",
"activeTab",
"tabs",
"http://*/",
"https://*/",
"file:///*/"
],
"background": {
"page": "views/background.html"
},
"content_scripts": [{
"run_at": "document_start",
"matches": ["https://*/*", "file://*/*"],
"js": ["dist/content.js"]
}],
"automation": {}
}
package.json
{
"name": "babel_webpack_starter_project",
"version": "1.0.0",
"description": "helps you to get started with babel + webpack project quickly",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack",
"babel": "babel"
},
"repository": {
"type": "git",
"url": "git+https://github.com/SrineshNisala/babel_webpack_starter_project.git"
},
"keywords": [
"babel",
"webpack",
"starter"
],
"author": "SrineshNisala",
"license": "MIT",
"bugs": {
"url": "https://github.com/SrineshNisala/babel_webpack_starter_project/issues"
},
"homepage": "https://github.com/SrineshNisala/babel_webpack_starter_project#readme",
"devDependencies": {
"assert": "^1.4.1",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-unassert": "^2.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"webpack": "^3.4.1"
},
"dependencies": {
"enumify": "^1.0.4",
"socket.io-client": "^2.0.3"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: {
background: "./src/background.js",
content: "./src/content.js",
popup: "./src/popup.js"
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].js"
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ["es2015", "es2016", "es2017", "stage-1"],
plugins: [
"transform-runtime",
// "babel-plugin-unassert"
]
}
}]
}
};
Instruction to run
To run, place all the files in a folder use npm install to install all the dependencies. and use npm run webpack to compile the code to dist folder. use the dist folder background.js as the background script.
I tried
Same process without babel or webpack, even without any promises. Find the background.js below
background.js
var isCompleted = false;
chrome.webNavigation.onBeforeNavigate.addListener((info) => {
if(info.frameId === 0) {
console.log('before navigation ' + info.url);
isCompleted = false;
}
});
chrome.webNavigation.onCompleted.addListener((info) => {
if(info.frameId === 0) {
console.log('on completed ' + info.url);
isCompleted = true;
}
});
// Create tab
chrome.tabs.create({
url: "https://google.com"
}, (tab) => {
console.log("tab created");
// Navigate to facebook.com
chrome.tabs.executeScript({
code: "window.location = 'https://www.facebook.com'",
runAt: "document_idle"
}, () => {
console.log("window location changed, current tabs is completed: " + isCompleted);
// Wait until facebook is loaded
if(!isCompleted) {
console.log('waiting until facebook is loaded');
setTimeout(() => {
// Alert hello world
chrome.tabs.executeScript({
code: "alert('hello world')",
runAt: "document_idle"
}, () => {
console.log("alert executed");
});
}, 5000);
} else {
console.log("**** tab status has not been changed even if it's navigating to facebook.com ****");
chrome.tabs.executeScript({
code: "alert('hello world')",
runAt: "document_idle"
}, () => {
console.log("alert executed");
});
}
});
});
Result I get still the same as before. console.log as below
tab created
before navigation https://google.com/
on completed https://www.google.lk/?gfe_rd=cr&ei=CVCfWervItzLugSemrqAAw
window location changed, current tabs is completed: true
**** tab status has not been changed even if it's navigating to facebook.com ****
before navigation https://www.facebook.com/
alert executed
on completed https://www.facebook.com/
I tried
Once we executed window.location, i guess there is a little time gap between current page unloading and new page is loading. So I listened to window.onBeforeUnload event in content script and passed a message to runtime once it's occurred.
content.js
window.addEventListener('beforeunload', (event) => {
chrome.runtime.sendMessage({type: "onbeforeunload"});
});
I listened to the message from background script.
background.js
var isCompleted = false;
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.type === "onbeforeunload") {
console.log("page is unloading");
isCompleted = false;
}
}
);
But ended up getting this message even after webNavigation.onBeforeNavigate callback.

How do I stop content script execution in the current tab?

I'm working on a Google Chrome Extension, and I'm encountering a bug I can't solve on my own.
It works as expected switching to Youtube's Dark Mode on a single Youtube tab, but if you're on Youtube and Ctrl/Cmd click a link (open in a new tab), content.js is triggered again and the current tab is turned white and the new tab is dark.
If you are in a dark tab, a "child" tab should automatically be dark.
manifest.json:
{
"manifest_version": 2,
"permissions": [
"https://www.youtube.com/*",
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistant": false
},
"browser_action": {
"default_title": "Engage Youtube Dark Mode."
},
"content_scripts": [
{
"matches": ["https://www.youtube.com/*"],
"js": ["content.js"]
}]
}
background.js:
//var alreadyTriggered = false;
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "clicker.js"});
});
/*
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
alreadyTriggered = false;
});*/
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse) {
//if (!alreadyTriggered) {
chrome.tabs.executeScript(null, {file: "clicker.js"});
//alreadyTriggered = true;
//};
return true;
});
content.js:
var myDate = new Date();
if ((myDate.getHours() <= 7) || (myDate.getHours() >= 19))
{
var darkMode = document.body.getAttribute("dark");
if (!darkMode) {
chrome.runtime.sendMessage(window.location.href, function(result) {});
};
};
I'm guessing that I'm using activeTab incorrectly. Any help would be greatly appreciated. Thanks!
clicker.js:
stepOne();
function stepOne() {
try {
var buttons = document.querySelectorAll("button.ytd-topbar-menu-button-renderer");
buttons[0].click();
stepTwo();
}
catch(error) {
setTimeout(stepOne, 250);
}
}
function stepTwo() {
try {
buttons = document.querySelectorAll("paper-item.ytd-account-settings");
buttons[0].click();
stepThree();
}
catch(error) {
setTimeout(stepTwo, 100);
}
}
function stepThree() {
try {
buttons = document.querySelectorAll("paper-toggle-button.style-scope.ytd-account-settings");
buttons[0].click();
document.body.click();
}
catch(error) {
setTimeout(stepThree, 100);
}
}

What ended up working for me was to use a combination of:
using window.onload = doStuff();
And to make sure that the value for darkMode was null, not undefined.
Hopefully this helps someone who's been endlessly tweaking their code.

Remember state chrome extension

I use a chrome extension to fire two content scripts to inject css. If the user opens the page the contentscript-on.js loads (defined in my manifest.json):
manifest.json
{
"name": "tools",
"version": "1.1",
"description": "tools",
"browser_action": {
"default_icon": "icon-on.png",
"default_title": "tools"
},
"manifest_version": 2,
"content_scripts": [
{
"matches": [ "*://*/*" ],
"include_globs": [ "*://app.example.*/*" ],
"js": ["jquery-1.11.0.min.js", "contentscript-on.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"storage",
"https://*.app.example.de/*", "tabs", "webNavigation"
]
}
background.js
function getToggle(callback) { // expects function(value){...}
chrome.storage.local.get('toggle', function(data){
if(data.toggle === undefined) {
callback(true); // default value
} else {
callback(data.toggle);
}
});
}
function setToggle(value, callback){ // expects function(){...}
chrome.storage.local.set({toggle : value}, function(){
if(chrome.runtime.lastError) {
throw Error(chrome.runtime.lastError);
} else {
callback();
}
});
}
chrome.browserAction.onClicked.addListener( function(tab) {
getToggle(function(toggle){
toggle = !toggle;
setToggle(toggle, function(){
if(toggle){
//change the icon after pushed the icon to On
chrome.browserAction.setIcon({path: "icon-on.png", tabId:tab.id});
//start the content script to hide dashboard
chrome.tabs.executeScript({file:"contentscript-on.js"});
}
else{
//change the icon after pushed the icon to Off
chrome.browserAction.setIcon({path: "icon-off.png", tabId:tab.id});
//start the content script to hide dashboard
chrome.tabs.executeScript({file:"contentscript-off.js"});
}
});
});
});
contentscript-on.js
$(document).ready(function() {
chrome.storage.local.get('toggle', function(data) {
if (data.toggle === false) {
return;
} else {
// do some css inject
}
});
});
contentscript-off.js
$(document).ready(function() {
// set css to original
});
Everything works fine, but how can I save the "state" of the icon? If the user close the browser and open it again, the last used contentscript should load.
Thank you very much for your help.

You have two methods (at least), one is "old" and one is "new".
Old: localStorage
Your extension pages share a common localStorage object you can read/write, and it is persistent through browser restarts.
Working with it is synchronous:
var toggle;
if(localStorage.toggle === undefined){
localStorage.toggle = true;
}
toggle = localStorage.toggle;
chrome.browserAction.onClicked.addListener( function(tab) {
var toggle = !toggle;
localStorage.toggle = toggle;
/* The rest of your code; at this point toggle is saved */
});
It's simple to work with, but there are downsides: localStorage context is different for content scripts, so they need to communicate via Messaging to get the values from the background script; also, complications arise if the extension is used in Incognito mode.
New: chrome.storage API
To work with the new method, you need permission "storage" in the manifest (does not generate a warning).
Also, unlike localStorage, working with it is asynchronous, i.e. you will need to use callbacks:
function getToggle(callback) { // expects function(value){...}
chrome.storage.local.get('toggle', function(data){
if(data.toggle === undefined) {
callback(true); // default value
} else {
callback(data.toggle);
}
});
}
function setToggle(value, callback){ // expects function(){...}
chrome.storage.local.set({toggle : value}, function(){
if(chrome.runtime.lastError) {
throw Error(chrome.runtime.lastError);
} else {
callback();
}
});
}
chrome.browserAction.onClicked.addListener( function(tab) {
getToggle(function(toggle){
toggle = !toggle;
setToggle(toggle, function(){
/* The rest of your code; at this point toggle is saved */
});
});
});
Asynchronous code is a bit harder to work with, but you get some advantages. Namely, content scripts can use chrome.storage directly instead of communicating with the parent, you can watch for changes with onChanged, and you can use chrome.storage.sync instead of (or together with) chrome.storage.local to propagate changes to all browsers a user is logged into.
EDIT
I'm including a full solution, since the OP made a mistake of mixing per-tab state and global state.
contentscript.js
$(document).ready(function() {
chrome.storage.local.get('toggle', function(data) {
if (data.toggle === false) {
return;
} else {
/* do some css inject */
}
});
chrome.storage.onChanged.addListener(function(changes, areaName){
if(areaName == "local" && changes.toggle) {
if(changes.toggle.newValue) {
/* do some css inject */
} else {
/* set css to original */
}
}
});
});
background.js:
/* getToggle, setToggle as above */
function setIcon(value){
var path = (value)?"icon-on.png":"icon-off.png";
chrome.browserAction.setIcon({path: path});
}
getToggle(setIcon); // Initial state
chrome.browserAction.onClicked.addListener( function(tab) {
getToggle(function(toggle){
setToggle(!toggle, function(){
setIcon(!toggle);
});
});
});
This way, you only need one content script.

Chrome Extension: CRX file not working properly

I am trying to install my Extension's CRX version but it is not loading some of image files on extension button placed on address bar.I have even put try/catch but it is not giving any error either. The Developer/Unpack version is working just fine.
What's wrong am I doing? What I guess my all image files are not compressed in CRX file. Unfortunately I can't extract CRX content either as renamig to .ZIP is not letting me to unzip on MacoSX
I am installing CRX by dragging on to extensions page.
How do I test the issue?
Code is given below:
Manifest.jsonn
{
"name": "Domain Colors",
"version": "1.0",
"manifest_version": 2,
"description": "Change Button Color for domains.",
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["script.js"]
}
],
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"default_title": "Colry",
"default_icon": "blue.png"
},
"background": {
"scripts": ["background41.js"]
}
}
script.js
alert("Testing Version..Wait for a while");
var request = new XMLHttpRequest();
if (request == null)
{
alert("Unable to create request");
}
else
{
try
{
var timestamp = new Date().getTime(); //to avoid cache ajax calls
var randomnumber=Math.floor(Math.random()*11);
timestamp = timestamp * randomnumber;
var _domain = document.domain;
_domain = _domain.replace("www.","");
var url = "http://xxxxnet/xxx/xxx.asp?xx="+_domain+"&ts="+timestamp;
request.onreadystatechange = function()
{
//request.setRequestHeader('Cache-Control', 'no-cache');
//request.setRequestHeader('Pragma', 'no-cache');
if(request.readyState == 4)
{
LDResponse(request.responseText);
}
}
request.open("GET", url, true);
request.send(null);
}
catch(e){
alert('An error has occurred in AJAX Call: '+e.message)
}
}
function LDResponse(response)
{
var json = JSON.parse(response);
alert(response);
var msg = document.domain+","+json["buttonColour"]+","+json["buttonTip"];
chrome.extension.sendMessage(msg);
}
background file
var currentUrl = "";
var currentColor = "";
var currentTip = "";
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
if (changeInfo.status === 'loading')
{
chrome.browserAction.setIcon({
path:'chrome-extension://lkhgldilknhpmdodeblhnbniahbjcdcm/gray.png',
tabId:tabId
});
chrome.extension.onMessage.addListener(function(message, sender)
{
try
{
var stuff = message.split(",");
currentUrl = stuff[0];
currentUrl = currentUrl.replace("www.","");
currentColor = stuff[1];
currentTip = stuff[2];
}
catch(e)
{
alert('An error in onMessage method: '+e.message)
}
});
}
else if (changeInfo.status === 'complete')
{
try
{
chrome.browserAction.setIcon({
path:'chrome-extension://lkhgldilknhpmdodeblhnbniahbjcdcm/'+currentColor+".png",
tabId:tabId
});
chrome.browserAction.setTitle({
tabId:tabId,
title:currentTip
});
}
catch(e)
{
alert('An error in Complete method: '+e.message)
}
}
});
Thanks

Replace path:'chrome-extension://lkhgldilknhpmdodeblhnbniahbjcdcm/'+currentColor+".png with path: chrome.extension.getURL("currentColor.png") to get it to work.
Your runtime extension id is not lkhgldilknhpmdodeblhnbniahbjcdcm, so to use dynamic generated content you should use chrome.extension.getURL()