Removing an Image from a web page with chrome extension

Question

I am trying to write a simple google chrome extension which can remove the stackoverflow logo from the stackoverflow.com website. But it doesn't work.

Here is my work.

manifest.json

{
  "manifest_version": 2,
  "name": "Transpose",
  "description": "Extension to switch images",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

popup.html

<!doctype html>
<html>
<head>
    <title>Transpose</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="popup.js"></script>
</head>
<body>
<h1>Transpose</h1>
<button id="btnEnable">Enable Add-on</button>
</body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function () {

    chrome.tabs.getCurrent(function (tab) {
        //alert(tab.title);

        $('#btnEnable').on('click', function () {

            $('#hlogo').remove();

        });

    });

}, false);

Can anyone help me to figure out the error?

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

Remember that this code is not running in the same environment as the rest of the page. This is it's own html page with it's own DOM, event handlers, etc. You'll need to inject a script into the stackoverflow page, which you can learn how to do from here.

edited May 23 '17 at 12:31

Community

1
1

answered Jan 01 '16 at 10:17

UtsavShah

857
1
9
20

score 1 · Answer 2 · answered Jan 01 '16 at 10:31

You can't use chrome.tabs.getCurrent since you are calling it from a popup. Popup isn't a tab and it will give you undefined..

In fact you don't need to get the current tab. What you need to do is to call chrome.tabs.executeScript like:

chrome.tabs.executeScript( { code: "$('#hlogo').remove();" } );

In order to do that, you need "activeTab" permissions and "https://stackoverflow.com" cross-origin permissions.

Removing an Image from a web page with chrome extension

2 Answers2