0

I'm trying to write a chrome extension which should pick up url of the currently open tab. The extension is popup based so I made an html the code of which is as follows:

<html>
<head>
    <title>popup</title>    
</head>
<body>
<img src="www.insertrandom.com/query=" id="urlstore">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="content.js"></script>
</body>
</html>

when I open this webpage and inspect element (ctrl+shift+i), there are NO errors at all. But if I inspect elements on other webpages(which are actually on internet) like, stackoverflow I get the error:

Cannot set property 'src' of null

Previously asked questions on stackoverflow, like these: Cannot set property 'src' of null and Error: Cannot set property 'src' of null are unable to solve the issue.

//content.js
var curr_url = window.location.href;
var base_url = "www.insertrandom.com/query=";
document.getElementById("urlstore").src = base_url+curr_url;

And another problem is that when I open the popup on other web pages, the url that I get is chrome-extension://insertrandomid/popup.html and not the current url

Breakpoint
  • 428
  • 6
  • 19
  • 1
    1) content.js is a misleading name as you're loading it as a normal script inside your popup page, not as a content script. See the [architecture overview](https://developer.chrome.com/extensions/overview). 2) The popup is a separate page with its own location.href so it's not what you want, instead [use chrome.tabs API](https://stackoverflow.com/a/17826527) (note, it's asynchronous so use the result inside the callback). 3) URLs inside `src` attribute should start with `http://` or `https://` otherwise it'll be interpreted as a relative path. – wOxxOm Apr 13 '19 at 13:24
  • Also, make sure you're using [the correct devtools](https://stackoverflow.com/a/38920982) for the popup. – wOxxOm Apr 13 '19 at 13:26
  • Thanks @wOxxOm 1) I'll change the name of the js file, it's my first extension so couldn't manage while copying-pasting 2) Sure, I'll use chrome tabs API but I don't understand the part you wrote: "it's asynchronous so use..." can you please explain? 3) URL is starting with https:// I changed the link while posting the question. – Breakpoint Apr 13 '19 at 14:13
  • @wOxxOm I get the error `Cannot read property 'query' of undefined` when I use the code `chrome.tabs.query(active...)`. – Breakpoint Apr 13 '19 at 15:36
  • It means you still don't know the difference between the popup page (and its scripts) and the content scripts. Did you read the overview I've linked? – wOxxOm Apr 13 '19 at 15:39
  • I did read the page, From my understanding: Popup is the html page which comes down from extension when we click it. content.js contains the javascript that interacts with the webpage of the user. I also understood that script of popup can be different from content.js . I also wanted to update you that just to confirm that I'm replying you with right content, I re-read the page and I have got my answers. Thank you! – Breakpoint Apr 13 '19 at 15:56
  • 1
    My point was the task at hand doesn't require a content script, only a popup script where you can use chrome.tabs API while content scripts can't use chrome.tabs and most of chrome API because they run in a special isolated environment alongside the web page. – wOxxOm Apr 13 '19 at 16:08

1 Answers1

-2

Notice that document.getElementById("urlstore").src = base_url+curr_url;. That means you need an element with id urlstore on your page. If the element with id urlstore is not exist/include src attribute, you will get the error Cannot set property 'src' of null. If document.getElementById("urlstore") exists, you should log this element to check whether src attribute exists: console.log(document.getElementById("urlstore"));

Hai Huynh Ngoc
  • 359
  • 3
  • 6