Basic Chrome Extension programming: unable to dynamically block websites

I’m trying to write a simple chrome extension that blocks twitter when I click on it.

Here’s my background.js:

var enabled = true;
const global_blocked_urls = ["https://*.chess.com/*"];



chrome.webRequest.onBeforeRequest.addListener(
    (details) => {
        console.log(global_blocked_urls); //prints as expected 
        console.log("blocking:", details.url);
        return {
            cancel: enabled
        };
    }, {
        "urls": global_blocked_urls
    }, ["blocking"]
);

chrome.runtime.onMessage.addListener(block_twitter);

function block_twitter(msg) {


        var twitter_regex = "https://*.twitter.com/*";
        global_blocked_urls.push(twitter_regex);
        console.log(global_blocked_urls);

    console.log(msg);
}

I’m holding a list of links that I don’t want to visit, inside a global list.

The problem: Say the block_twitter listener is triggered first, and then I visit a new webpage – so the onBeforeRequest listener is triggered next. When I print out the global list inside callback to chrome.webRequest.onBeforeRequest.addListener, it prints out what I expect it to print out.

But: it still allows me to visit twitter, despite the regex twitter url being the in the global list.

How do I debug/fix this?

chrome.contextMenus.create with dynamic items

I want to build a chrome extension that has a menu with some items based on what you click on.

i use chrome.runtime.onConnectExternal to pass the date, everything works fine in here. but as the messaging between extension and site is done async some time the events come after the menu gets shown. and it dose not update after that.
the end result is that some times you see the menu based on the old item that was right clicked.

Is there a way to refresh the menu while open. or a way to comunicate between site and extension in a sync way?

Here is a example showing menu not updating:

const test = chrome.contextMenus.create({
    'title': `menu 0`,
    "contexts": ['all'],
});

let index = 0;

setInterval(() => {
    chrome.contextMenus.update(test, {title: 'menu ' + index++})
}, 1000);

send message to content script from background with delay ? chrome extension

I want to senMessage from background to content script , however the I want the background to send the message after a specific time , here is my code :

background :

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.id == "openUrl") {
        var tabId = sender.tab.id;
        var url = msg.url;
        openUrl(tabId, url);
    } else if (msg.id == "background") {
        setTimeout(function() {
            chrome.tabs.query({
                active : true,
                currentWindow : true
            }, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {}, null);
            });
        }, 5000);
    }
});

I am receiving the bellow error :

**Error in response to tabs.query: TypeError: Cannot read property 'id' of undefined**

I am not sure , why the chrome api can get the selected tab ?

You can download the source file here :

https://drive.google.com/open?id=1_Hkedx8ldAeRWiFKTj4YEv_bXFUt-3CY

Thank you .

Permission error in executeScript

I am trying to inject some js file while tab open.So, on tab open i execute

chrome.tabs.onCreated.addListener(function callback(tab, info) {   
 chrome.tabs.executeScript(tab.id, {
                         file: "executeScript.js"
      });
});

but some time it works ,some time i am getting

Cannot access contents of url “https://www.google.com/_/chrome/newtab?rlz=1C1CHZL_enIN708IN708&ie=UTF-8“. Extension manifest must request permission to access this host.
error.
i have added * ://*/ * , in manifest file permission but no luck.

Chrome Extension: require.js is not loading modules

I’m trying to load the sentiment module, using require.js in my content.js as explained in this doc:

require(['./require', '../node_modules/sentiment'], function (require) {
    //sentiment is now loaded.
    var sentiment = require('../node_modules/sentiment');
    if (sentiment) { 
        console.log('sentiment module loaded'); 
    }
});

There are no console errors, so I’m not entirely sure why nothing is being printed to the console or how to fix this issue.

Store persistent data without a web server for Chrome Extension

Is there any way to store persistent data for Chrome Extensions without using a web server?

Is Chrome storage persistent? https://developer.chrome.com/apps/storage

I want to avoid the costs of a server, but I also don’t think localStorage is good enough because the user can delete it.

In fact, the only persistent data I need to store is the accounts that have logged into the extension on the device itself, so that info might be stored by Google’s servers already?

Chrome Extension : Need alternative property for chrome App “app” : “urls”

Previously am using chrome App for clipboard paste, below are the manifest.json. After app installation i simply call document.execCommand(‘paste’) in my page https://123.com

"offline_enabled": true,

  "permissions": [ "background", "clipboardRead", "clipboardWrite", "notifications", "unlimitedStorage" ],

  "app": {
    "urls": [ "https://123.com" ]
  },

  "background": {
      "allow_js_access": false

   }

Hope chrome app will get removed soon. Now I don’t know how to replicate it in extension. Please help me.

I tried working with below manifest but it didnt help

{

    "name": "Test Sample",

    "description": "Test",
    "version": "0.1",
    "permissions": [
        "tabs", "https://*/*",
         "clipboardWrite",
         "clipboardRead",
         "background"
    ],

    "content_scripts": [
        {
        "matches": [
            "http://*/*",
            "https://*/*"
            ],
        "js": ["script.js"],
        "run_at": "document_end"         // pay attention to this line
        }
    ], 
    "manifest_version":2
}

script.js

document.addEventListener('paste', function(e) {
 console.log('Paste Trigger');
 document.execCommand('paste');
});

Chrome Extension click event handlers in popup capturing wrong target

In my extension, I’m trying to make a bunch of buttons. Each of the numbers is a button, so all cells in the table except the header “Save” and “Load”.

enter image description here
So my goal is 20 buttons, 1-9 (& 0) on the left that do a save action & 10 more that load. I made click handlers for each button and am generating the table dynamically.
Here’s a section of the relevant code in my script linked from my popup html page

$(document).ready(populateGroupButtons)

function populateGroupButtons(){
    const groups=[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]     //group 0 is at the end
    let table=$('#groupButtons')
    groups.forEach((group)=>{
            table.append(
            ''+
                ''+
                    group+
                ''+
                ''+
                    group+
                ''+
            ''
        )
    })

    $(document).ready(registerClickHandlers)
}

function registerClickHandlers(){
    let table = $('#groupButtons')
    for(let group=0; group<=9; group++){
        $('#save'+group).click((e)=>{
            console.log($('#save'+group))
        });
        $('#load'+group).click((e)=>{
            console.log($('#load'+group))
        })
    }
}

Popup html page




    
    


    

Popup

Save Load

Open console to see output

I have it working if I view popup.html in a new tab and it also works here isolated as a jsfiddle
The problem is when I use it as a chrome extension, the table cell I click, isn’t the correct target of the event handler

  • Right now I’m just loggin the target to console to see what’s happening (I want to make the buttons actually do things later)
  • When I click the 1 in the Save column, it logs #save2
  • When I click the 2 in the save column, it logs #save3
  • When I click the which contains the word “Save”, it logs, #save1
  • Row 9 & 0 don’t respond when clicked so appear to have no event handlers

Basically, everything is shifted up 1 row and I don’t know why
It’s working fine as pure JavaScript and on the fiddle, but somehow the target is wrong

Here’s a zip folder of the entire extension

Chrome Extension lastFocusedWindow not changing when clicking on popups in different windows

I’m trying to get all the tabs in the current window when the user clicks my popup. I know that chrome.windows.getCurrent() won’t always work because that’s the window where code is executing.

So I tried chrome.windows.getLastFocused() but then I realized I could do the same thing directly on the tabs

chrome.tabs.query({lastFocusedWindow: true}, (tabs)=>{
    tabs.forEach(function(tab){
        console.log(tab.title)
    })
})

The Problem
When I have multiple multiple windows open and I click on the extension icon to open my popup, lastFocusedWindow doesn’t seem to change.
I have event handlers that are currently just firing to log the tabs in the current window when the popup loads and also listening for clicks anywhere inside the popup.

Example: I have 2 windows

  1. Click the popup icon in window1 (correctly identified tabs in window1)
  2. Click the popup icon in window2 (correctly identified tabs in window2)
  3. Click inside the popup content on window1 (still thinks I’m in window2 and shows tabs for window 2)

I guess somehow when I click directly on a popup, Chrome doesn’t see that as a focus change and I don’t know what to do.

My workaround/hack is to use window.close() in my popup after they click event happens so that it’s less likely for multiple popups to be open at once but it doesn’t complete solve the issue because they can click to open the popup but then click in another window to open another popup which leaves the 1st popup open.

Overriding type defintions in TypeScript

I’m trying to develop a Chrome Extension in TypeScript. I have installed @types/chrome and everything seemed in order.

Now I want to use chrome-extension-async which provides a Promisified version of the chrome extension objects, allowing me to async/await.

I can’t seem to figure out how to enable this extension, though. The documentation just says I should add a