Databases
StackOverflow2013
Postsdbo
POCannot set property 'innerHTML' of null in Chrome Extension
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCannot set property 'innerHTML' of null in Chrome Extension
    text
    copied!<p>I am trying to make a new extension for Chrome which will be parsing HTML code of the current tab and work on it. </p> <p>This is what I have got so far. </p> <p>manifest.json</p> <pre><code>{ "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://*/*" ]} </code></pre> <p>info.js</p> <pre><code> 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); } </code></pre> <p>mainme.js</p> <pre><code> var maintest = document.getElementsByTagName('html')[0].innerHTML; var mtest = maintest.search("&lt;body"); document.getElementById("divy").innerHTML=mtest; </code></pre> <p>popup.html</p> <pre><code>&lt;HTML&gt; &lt;head&gt; &lt;script type="text/javascript" src="info.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="divy" width="200" height="400"&gt;blank&lt;/div&gt; &lt;button id="clickhere"&gt;Press&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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. </p> <p>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 <p><strong>UPDATE AFTER ChrisP answer:</strong></p> <hr> <p>First I want to thank for hints.</p> <p>I changed my manifest to contain this </p> <pre><code> "content_scripts": [ { "matches": ["http://*/*"], "js": ["mainme.js"] } ], </code></pre> <p>Then I have some questions about mainme.js how should I put the code in? I was thinking of something like below </p> <pre><code>chrome.runtime.sendMessage({code:var maintest = document.getElementsByTagName('html')[0].innerHTML;var mtest = maintest.search("&lt;body");}, function(response) { window.document.getElementById("divy").innerHTML=mtest; }); </code></pre> <p>Not sure how am I suppose to implement my code :(</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload