(chrome extension) can’t select file from file input at popup.html unless DevTools is opened

i have a very strange situation at chrome extension. the popup.html page contains a file input element, but when click it the file browser opens but selecting a file doesn’t have any effect (eg: “change” event not fired and file name doesn’t appear at file input element).

but when i do right click on extension icon and select “inspect popup” and try again to choose a file, surprisingly, file input element works and “change” event fired.

the following are extension files. load the extension and click extension icon to see file input element. clicking file input will show file browser but won’t choose a file.
right click on extension icon and choose “inspect popup” to open popup window. now input element works just by opening “inspect popup” window.
of course you need to visit “https://developer.chrome.com” because of pageurl restrict at background.js

using jquery has no effect.


"name": "hello world",
"version": "1.0",
"description": "hello world",
"permissions": ["activeTab", "declarativeContent"],
"background": {
  "scripts": ["background.js"]
"page_action": {
  "default_popup": "popup.html"
"manifest_version": 2



chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {

    conditions: [new chrome.declarativeContent.PageStateMatcher({
      pageUrl: {
          hostEquals: 'developer.chrome.com',
        actions: [new chrome.declarativeContent.ShowPageAction()]





document.getElementById('file-input').onchange = function(ev){
    document.querySelector('.debug').appendChild(document.createTextNode("change event fired"));

Edge Extension does not respond to runtime.onMessage.addListener()

I have been trying to get my hands dirty with developing some extensions on the Edge platform. Going good so far, until I hit a blocker. I have a method in my background script which produces context menus, and when clicked, sends a message to the context script. Everything works fine except that the context script shows no signs of invoking the event listener.

Here is my code:




background script:

id: "Show Notes",
title: "Show Notes",
contexts: ['link']

    id:"Make Notes",
    title:"Make Notes",

browser.contextMenus.onClicked.addListener(function(info, tab) {
    browser.tabs.query({active: true}, function(tabs){

Content script:


function lis(request, sender, sendResponse) {
    if(request.id=="Show Notes"){
    if(request.id=="Make Notes"){
    return true

All the alert messages in the background script work fine, but the content script just doesn’t make even a single pop up.

I have read and tried to implement a lot of answers, not of them worked.
What could be going wrong?

Extension to be available only to the declared sites in manifest.json upon logged in else greyed out on all other sites

I want the extension to be available only when the user is logged in to the parent site i.e www.flyship.com and also to the sites which are mentioned in the manifest.json.

 "content_scripts": [
        "matches": [
        "js": ["scripts/content.js","scripts/index.js"]

In the background.js i am checking if the user is logged in to flyship.com using this code

  function(request, sender, sendResponse){
    if(request.login === "logged"){
      checkUser(request, sender, sendResponse);
      // checkforValidUrl();
return true;
function checkUser(request, sender, sendResponse){
    chrome.cookies.get({url : "https://www.flyship.com/app", name: "csrftoken"}, function(cookie){
      const CSRF = cookie.value;
      sendResponse({token: CSRF});

I need the extension to be greyed out on all the other sites except the mentioned sites in manifest.json that too only when the user is logged in to flyship.com.

P.S : i have tried with declarativeContent but it doesn’t seem to be working for me or maybe atleast am not able to deduce it according to my needs. following is the code that iam checking the urls on

function checkforValidUrl(){
  chrome.runtime.onInstalled.addListener(function() {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
          conditions: [
            new chrome.declarativeContent.PageStateMatcher({
              pageUrl: { urlContains: '*://*.flyship.com/*' },
            new chrome.declarativeContent.PageStateMatcher({
              pageUrl: { urlContains: '*://app.yield.io/*' }
            new chrome.declarativeContent.PageStateMatcher({
              pageUrl: { urlContains: 'https://www.indeedjobs.com/*' }
          actions: [ new chrome.declarativeContent.ShowPageAction() ]

I have been banging my head since 1 week to solve this problem reading docs and what not.A polite help in this regard would be very helpful.

RealmDB for chrome extension

I am going to develop a chrome extension and I’ll have a need of storing data in local. So extension can works in offline too.

I came across the RealmDB, It seems fast and best fit for my need as it has indexed, can handle large data and query speed.

Is there any way to use RealmDB with chrome extension?


Web Bluetooth API get list of all available device nearby

I am looking for an API call that could be used to retrieve all the Bluetooth devices near me. These samples Web Bluetooth talk about getting different characteristics from a single Bluetooth device, however I couldn’t find any example which retrieves all the Bluetooth devices(like available bluetooth devices list on windows native Bluetooth app). Is it even supported?

How to inject script to all frames matching URL from browser extension background-script?

In our browser extension background-script we have a code that injects content-script to all tabs matching specific URL. It is used to activate extension after it is installed without need to reload matching page(s):

  status: 'complete',
  url: 'https://*.example.com/*'
}, function (tabs) {
  tabs.forEach(function (tab) {
    chrome.tabs.executeScript(tab.id, {
      file: 'content-script.js',
      runAt: 'document_idle'

Is there a way to inject content-script also to all frames matching this URL? Eg. if somebody has our webapp (app.example.com) embedded in his page (www.acme.com). We need to do it without any additional extension permissions (now they are desktopCapture and https://*.example.com/) or without mentioning www.acme.com anywhere in our extension. Otherwise we would use webNavigation API.

Associate requests with active page

I’m working on a browser extension (compatible with Chrome, FF, Opera, and Edge) and I’m trying to figure out how to associate requests to domains outside of the current page. For example, when you go to google.com a lot of requests to domains other than google.com occur such as to gstatic.com.

An extension like NoScript shows all of the requested domains that a page made and lets you allow or deny. I’m trying to get a similar functionality.

Is this something that can be done in the content script or is there some way to keep state information in the background script that I can then display in the popup? Obviously it’s possible but I’m just not seeing which callback I can use.

Chrome Extension: Run Content Script before any Embedded Scripts run on Page

I’m trying to change some behavior of the YouTube player, by changing some variables inside of the player_api script that is embedded into the html watch page of videos.

The embedded script i'm trying to modify

Problem is, whatever i try, the embedded script of the player always runs before my extension adds modifications to it. Thus keeping the behavior of the player the same.

I tried setting the run_at property in my manifest to document-start, but then the script didn’t run at all.

What can i do to halt the execution of that script until i make changes to it?

PS: I tried changing the script by intercepting the html call and editing the body with Charles Proxy and the behavior of the player changed as i wanted. So it know it should work, if done at the right time.



    "manifest_version": 2,
    "name": "YouFit For YouTube",
    "version": "1",
    "content_scripts": [{
        "js": ["content.js"],
        "matches": ["https://*.youtube.com/watch?*",
    "browser_action": {
        "default_icon": "icon.png"


function changeBehavior() {
    var scriptElements = document.getElementsByTagName('script');
    for (var i = 14; i < scriptElements.length; i++) {
        var curScriptBody = scriptElements[i].outerHTML;
        // Find the script i'm interested in
        if (curScriptBody.indexOf("var ytplayer") != -1) {
            scriptElements[i].outerHTML = scriptElements[i].outerHTML.replace("", "");

How to monetize a browser extension by injecting ads

I am looking to monetize a browser extension by injecting (non-intrusive, non-tracking, clearly indicated and clearly communicated) ads within websites visited by the extension’s users.

Could you advise on which ad networks may allow this?

Are there any other caveats?

Is it possible to modify KeyboardEvent before webpage processes it?

I am trying to figure out if it is possible to re-map keyboard shortcut defined by a web application, because that would solve this issue: Frustration over Shift+Space YouTube keyboard shortcut when creating subtitles.

So, I was thinking: would it be possible, for a Chrome/Mozilla/… extension to capture and modify KeyboardEvent (in this case, just clear the Shift modifier for space character) before the event is passed to the web application?

I was looking for such an extension but no success yet. Is it possible to do it, in principle?