Access dom from chrome extension?

M

maddog6702014-11-18 03:01:33

JavaScript

maddog670, 2014-11-18 03:01:33

There is one chat where there is a left sidebar, and so, I want to hide this sidebar through extensions and write a flag to localstorage.
My extension consists of popup.html, content.js, jquery.js, manifest.json and images.

manifest.json

{	
  "manifest_version": 2,
  "name": "LaravelRUS Hide",
  "version": "1.0",
  "icons": {
    "16":	"img/LaravelRUS16.png",
    "48":	"img/LaravelRUS48.png"
  },
  "browser_action":{
    "default_title": "LaravelRUS Hide",
    "default_icon": "img/LaravelRUS16.png",
    "default_popup":"popup.html"
  },
  "content_scripts": [{
    "matches": [
      "http://gitter.im/*",
      "https://gitter.im/*",
      "*://*.gitter.im/*"
    ],
    "js": [
      "js/jquery.min.js",
      "js/content.js"
    ]
    }]
}

popup.html

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/content.js"></script>
  </head> 
<body>
<button id="btn">BTN</button>
</body>
</html>

content.js

$(document).ready(function(e){
  var elem = e.target || e.window;
  $(elem).click(function(){
    console.log('click');
  });
});

this method does not help. How can we say going to the page that is specified in the manifest, press the button in the extension and hide the block?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alexander Aksentiev, 2014-11-18
@maddog670

I made simple js without any structures
, which connects jquery (if necessary) and directly from it, as usual, you work with the page, no special tricks are needed.
https://gist.github.com/S-anasol/9932506
Here is an example.
Installation: Drag & Drop on the list of chrome extensions, confirm.

K

Konstantin Kitmanov, 2014-11-18
@k12th

Firstly, content scripts have full access to the DOM tree of the page, there shouldn't be any problems with this. There is only no access to variables defined by the "native" scripts of the page.
Secondly, you have some strange content.js. I don't know what you were trying to achieve with this, but I'll try to guess:

$(function () {
    $(document).on('click', function () {
        console.log('click');
    });
});