0

Why am I not able to target the DOM in the active tab in this extension?

What I have is

manifest.json

{
  "manifest_version": 2,

  "name": "Test",
  "description": "This extension is for Tets",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
    "background": {
        "scripts": ["jquery.min.js", "popup.js"],
        "persistent": false
    },
    "content_scripts": [{
        "js": ["jquery.min.js", "popup.js"],
        "matches": ["http://*/*", "https://*/*"]
  }]
}

and in popup.html I have

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
      <div style="padding:60px;">
        <button class="btn btn-default" >Button</button>
      </div>
    <script src="jquery.min.js"></script>
    <script src="popup.js"></script>
  </body>
</html>

and finally I have

$("button").on("click", function(){
   $('body').css('background','red')
   console.log("Test");
});

This is actually targeting the body of popup.html and applying the .css() to there.

halfer
  • 18,701
  • 13
  • 79
  • 158
Mona Coder
  • 5,750
  • 15
  • 55
  • 103
  • 2
    Possible duplicate of [How to access the webpage DOM rather than the extension page DOM?](https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom) – wOxxOm Nov 10 '17 at 03:41
  • 1
    you are calling popup.js into all 3 separate worlds - background, all tabs and into the popup. A content script (the js called up under content_scripts) is the only script that can interact with the active tab DOM and if you want controls in the popup to do it, you need to send messages between the popup and the content script. See the first example from this Google samples page https://developer.chrome.com/extensions/samples#search:browseraction – Troy Wray Nov 11 '17 at 17:51

0 Answers0