Chrome extension not consistently running when navigating through Twitter

I’m writing a Chrome extension for Twitter that runs fine when I load any twitter page by putting in the URL manually, or when I refresh a twitter page. However, often (though not always) it will not run when I am navigating within twitter. For example, often if I click on someone’s profile, the extension doesn’t run. But if I refresh the page (still on the profile page) it will run.

I feel like it might be related to this question, Chrome extension is not loading on browser navigation at YouTube, but I’m exactly sure how.

I can tell that it’s not running (as opposed to not working in some other way) because I have log a bunch of stuff to the console whenever it runs.

Here is my manifest:

{
  "name": "Twitter Extend",
  "version": "1.0",
  "description": "A sea of white space",
  "permissions": ["tabs", ""],
  "content_scripts": [
   {
     "matches": ["http://*.twitter.com/*", "https://*.twitter.com/*"],
     "js": ["main.js"]
   }
 ],
  "manifest_version": 2
}

Chrome Extension: Run a content script from popup

In my chrome extension, I have a popup with a button. When the button is clicked, I want to use a content script to change the favicon of the tab.

I am trying to use chrome.tabs.sendMessage in popup.html and chrome.runtime.onMessage.addListenerin content.js, but I can’t seem to get it to work.

popup.html


    
        
        
    
    
        

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
if (request.color == "red")
    {
        var link = document.querySelector("link[rel*='shortcut icon']") || document.createElement("link");
        link.type = "image/x-icon";
        link.rel = "shortcut icon";
        link.href = chrome.runtime.getURL("img/red-circle-16.png");
    }
})

The console displays this error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem: chrome-extension-resource:”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-…’), or a nonce (‘nonce-…’) is required to enable inline execution.

Why can I not access functions on a website?

I am working on a extension for Google Chrome, it will provide a refined experience when working with Glitch. Glitch has a object that I am able to access from the Developer Tools console called application, when I try to access it from the content script I get a element with an id of application instead of the JavaScript object that the console gives me. I am using this for my content script.

console.log(window.application);

Inside the console I just type the following (and it works).

application

I have two videos below that will show off my issue, the first one shows my ability to access application from the console, and my second one shows my code and the issue.

example 1

example 2

Why can I not access objects on a website in content scripts?

I am working on a extension for Google Chrome, it will provide a refined experience when working with Glitch. Glitch has a object that I am able to access from the Developer Tools console called application, when I try to access it from the content script I get a element with an id of application instead of the JavaScript object that the console gives me. I am using this for my content script.

console.log(window.application);

Inside the console I just type the following (and it works).

application

I have two videos below that will show off my issue, the first one shows my ability to access application from the console, and my second one shows my code and the issue.

example 1

example 2

Cannot run content script in chrome extension

I have written a code for writing google chrome extension but the problem is that i cannot execute the content script in the chrome console.
Here is my following code

For Manifest file:-

    {
      "manifest_version": 2,

      "name": "My new extension",
      "description": "It does stuff",
      "version": "1"
      "content_scripts": [
    {
       "matches": [""],
       "js": ["content.js"]
     }
   ]
 }

For my content script:-

     console.log("Hello world!");

When i deploy the extension, it is accepted properly. It should be printed at chrome console but when i refresh, nothing is printed.
Can please anyone help me where I am wrong?
Thanks in advance.

Can’t remove element children from DOM using content script/Elements reappear

This is my first attempt at making a chrome extension.
I’m making one for an admission site where I, for starters, want to remove a FAQ window but I don’t understand why doesn’t work.

Here’s what I tried:

  1. Setting an interval to see if I try to remove it before it loads,
  2. Tried different children in the hierarchy,
  3. Getting elements by class and by and querySelector,
  4. Used ‘single’ quotes and double ones,
  5. Tried removing with element.innerHTML = ” and by removeChild(),

I’ve noticed that the console is printing out the element collection but that’s it. One important note is that only reappears AFTER the last alert,
alert(“Elements should be removed.”);

What I’m I missing?
(background.js is an empty file.)


manifest.json


{  
    "name":"Antagning+",
    "version":"0.1",
    "description":"None.",
    "permissions":["storage"],
    "background":{
        "scripts":["background.js"],
        "persistent":false
    },
    "page_action":{  
        "default_popup":"popup.html",
        "default_icon":{  
            "16":"images/antagning.png",
            "32":"images/antagning.png",
            "48":"images/antagning.png",
            "128":"images/antagning.png"
        }
    },
    "content_scripts":[  
        {  
            "run_at":  "document_end",
            "matches": ["https://www.antagning.se/se/search*"],
            "js":      ["jquery-2.2.4.min.js", "content.js"]
        }
    ],
    "icons":{  
        "16":"images/antagning.png",
        "32":"images/antagning.png",
        "48":"images/antagning.png",
        "128":"images/antagning.png"
    },
    "manifest_version":2
}

content.js


(function() {

    alert("Romved 1");
    var div = document.getElementsByClassName("faq hide_small");
    console.log(div);
    if(document.getElementsByClassName("faq hide_small")) {
        alert('element exists!');
    }
    setInterval(function(){ 
        while (div.firstChild) {
            div.removeChild(div.firstChild);
        }
        alert("Removed!");
    }, 3000);
    alert("Elements should be removed.");
})();

Sending message from Chrome Extension to Content Script, when extension lunched in separated window

I’m developing chrome extension that need to send messages to Content Script and everything works until I replace default popup by separated window. After that communication on messages doesn’t work.

My manifest:

{
  "manifest_version": 2,

  "name": "Overlight Live Reload",
  "description": "Overlight Testing Tool",
  "version": "0.0.1",
  "content_security_policy": "script-src 'self' http://localhost:3000/; object-src 'self'",
  "permissions": ["activeTab", "tabs", "storage", "declarativeContent", ""],

  "browser_action": {
    "default_title": "Overlight"
  },
  "background": {
    "scripts": ["background/background.js"],
    "persistent": false
  },
  "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "css": [],
      "js": ["contentScripts/lodash.js", "contentScripts/listeners.js"]
    }
  ]
}

Listener (content script):

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      console.log(sender.tab ?
                  "from a content script:" + sender.tab.url :
                  "from the extension");
      if (request.greeting == "hello")
        sendResponse({farewell: "goodbye"});
    });

Execution from extension app:

export const testSendToPage = () => {
    console.log('Sending message to web page')
    window.chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        window.chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
          console.log(response.farewell);
        });
      });
}

backgroung scipt that creates extension window:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.windows.create({
        height: 400,
        width:400,
        url: chrome.runtime.getURL("../popup.html"),
      type: "popup"
    });
});

Everything works fine, when instead creating separated window I’m using default popup. What’s more when I try use window.chrome.tabs.executeScript from separeted window exception I’ve got this.

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url “chrome-extension://ciipdholchghlckepfaecipbjleanmbg/popup.html”. Extension manifest must request permission to access this host.

Messages from content script to extesion app works great. How can I communicate from extension App to content script from extension separated window?

Sending message from Chrome Extension to Content Script, when extension launched in separate window

I’m developing chrome extension that need to send messages to Content Script and everything works until I replace default popup by separated window. After that communication on messages doesn’t work.

My manifest:

{
  "manifest_version": 2,

  "name": "Overlight Live Reload",
  "description": "Overlight Testing Tool",
  "version": "0.0.1",
  "content_security_policy": "script-src 'self' http://localhost:3000/; object-src 'self'",
  "permissions": ["activeTab", "tabs", "storage", "declarativeContent", ""],

  "browser_action": {
    "default_title": "Overlight"
  },
  "background": {
    "scripts": ["background/background.js"],
    "persistent": false
  },
  "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "css": [],
      "js": ["contentScripts/lodash.js", "contentScripts/listeners.js"]
    }
  ]
}

Listener (content script):

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      console.log(sender.tab ?
                  "from a content script:" + sender.tab.url :
                  "from the extension");
      if (request.greeting == "hello")
        sendResponse({farewell: "goodbye"});
    });

Execution from extension app:

export const testSendToPage = () => {
    console.log('Sending message to web page')
    window.chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        window.chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
          console.log(response.farewell);
        });
      });
}

backgroung scipt that creates extension window:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.windows.create({
        height: 400,
        width:400,
        url: chrome.runtime.getURL("../popup.html"),
      type: "popup"
    });
});

Everything works fine, when instead creating separated window I’m using default popup. What’s more when I try use window.chrome.tabs.executeScript from separeted window exception I’ve got this.

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url “chrome-extension://ciipdholchghlckepfaecipbjleanmbg/popup.html”. Extension manifest must request permission to access this host.

Messages from content script to extesion app works great. How can I communicate from extension App to content script from extension separated window?

Facebook page shifts when FB is added to Chrome Extension manifest

In the manifest.json of my Chrome Extension, I’ve added Facebook to the content script. For some reason, I’m not sure if this is a bug in my code or something to do with Facebook, when the extension runs with Facebook in the content script’s matches, the entire Facebook page becomes shifted.

Here’s an image of the bug.I’m not sure what’s happening nor what’s causing this to happen. My other friends have experienced the same issue when I ask them to include Facebook into the manifest.

The relevant code looks like this:

"content_scripts": [{
    "matches": [
      "http://*.facebook.com/*",
      "https://*.facebook.com/*",
      "https://*.twitter.com/**",
      "https://*.reddit.com/**"
    ],
...
}],

My extension works great on Reddit and Twitter. I’ve isolated the Facebook issue to here. Does anyone have a fix for this?

How to manipulate DOM elements,and replace it in chrome extension script?

In chrome extension,how to manipulate original html content

index.html

  
1 2 3 4

content.js

//some logic to get arrays of text in "number" class from html,then multiply with 2 , then update the index.html

required output (index.html)

  
2 4 6 8