CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Matt
Matt

Reputation: 337

Cannot set property 'innerHTML' of null in Chrome Extension

I am trying to make a new extension for Chrome which will be parsing HTML code of the current tab and work on it.

This is what I have got so far.

manifest.json

{
    "name": "some name",
    "manifest_version": 2,
    "version": "0.2",
    "description": "does something",
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    },
    "icons": {
      "128": "icon_128x128.png",
      "16": "icon_16x16.png",
      "48": "icon_48x48.png"
   },
    "background": {    
    "scripts": ["info.js", "mainme.js"]
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ]}

info.js

  function init() {
  var button = document.getElementById("clickhere");
  if(button.addEventListener){
     button.addEventListener("click", function() { 

    //function here
        chrome.tabs.executeScript(null,{file: "mainme.js"});


    //function end  

  }, false);
  } else if(button.attachEvent){
    button.attachEvent("onclick", function() { alert("alert");});
    }
  };
  if(window.addEventListener){
    window.addEventListener("load", init, false);
    } else if(window.attachEvent){
        window.attachEvent("onload", init);
    } else{
        document.addEventListener("load", init, false);
    }

mainme.js

  var maintest = document.getElementsByTagName('html')[0].innerHTML;
  var mtest = maintest.search("<body");
  document.getElementById("divy").innerHTML=mtest;

popup.html

<HTML>

<head>
<script type="text/javascript" src="info.js"></script>

</head>

<body>

<div id="divy" width="200" height="400">blank</div>
<button id="clickhere">Press</button>


</body>
</html>

The idea is that when I click the button on the popup.html the div id="divy" should change to the mtest variable. I think everything works but the problem is that when I click the button id="clickhere" I get "Uncaught TypeError: Cannot set property 'innerHTML' of null" error on console log.

Mainly the extension so far adds listener "onclick" and triggers the function chrome.tabs.executeScript which directs to mainme.js, then in mainme.js it gets the page source of the current tab, assigns this to maintest then it searches for

UPDATE AFTER ChrisP answer:

First I want to thank for hints.

I changed my manifest to contain this 

  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["mainme.js"]
    }
  ],

Then I have some questions about mainme.js how should I put the code in? I was thinking of something like below 

chrome.runtime.sendMessage({code:var maintest = document.getElementsByTagName('html')[0].innerHTML;var mtest = maintest.search("<body");}, function(response) {

window.document.getElementById("divy").innerHTML=mtest;

});

Not sure how am I suppose to implement my code :(

Upvotes: 0

Views: 4554

Answers (2)

M&#233;toule
M&#233;toule

Reputation: 14472

Since a Chrome extension will only run in Chrome, you're guaranteed that the method addEventListener is defined, and that the attachEvent is not. So that test is not needed.

As far as I understand, you're trying to extract content from the currently opened tab, and display it in the popup. Without writing the entire code for you, here are my suggestions:

The background page is the cornerstone of the extension. Basically, your extension should look like this:

web page <=> background page <=> popup page

Upvotes: 1

kernel
kernel

Reputation: 154

Try replacing

document.getElementById("divy").innerHTML=mtest;

with

window.document.getElementById("divy").innerHTML=mtest;

Upvotes: 0

Related Questions