Appended links not working in Chrome but works through Notepad++?

Question

So in popup.html I got some links that works when I load it into Chrome, but when I append some links using forminput.js; the links are appended and it does work when I launch it from Notepad++ but fails to work when I load it into Chrome, dropdown.js and createtab.js both works fine and has nothing to do with this problem, they contain logic for opening tabs and handling dropdown menu. Thanks

popup.html

<body>
<form id="aform">
  URL:<br>
  <input type="text" name="URL" id="URL">
  <br>
  Bookmark Name:<br>
  <input type="text" name="bookmarkname" id="bookmarkname">
  <br><br>
  <input type="button" id="formsubmit" value="Submit">
</form> 
<div class="dropdown">
  <button class="dropbtn" id="dropdown">Links</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="https://www.youtube.com">Youtube</a>
    <a href="https://www.amazon.com">Amazon</a>
    <a href="https://www.yahoo.com">Yahoo</a>
  </div>
</div>

<script src="forminput.js"></script>
<script src="dropdown.js"></script>
<script src="createtab.js"></script>

manifest.json

    {
    "name" : "Links",
    "version" : "1.0",
    "description" : "links 4 u",

    "manifest_version" : 2, 

    "browser_action": {
        "default icon":"icon.png",
        "default_popup":"popup.html"
    },

    "permissions": [
        "tabs",
        "storage"
    ]
}

forminput.js

    function retrieveFormData() {

            var URL = document.getElementById("URL").value;
            var Bookmarkname = document.getElementById("bookmarkname").value;
            var y = document.getElementById("myDropdown");
            var aTag = document.createElement('a');
            aTag.appendChild(document.createTextNode(Bookmarkname));
            aTag.href = URL;
            y.appendChild(aTag);
}


document.getElementById("formsubmit").addEventListener("click",retrieveFormData);

having said all that ... your code works just fine https://jsfiddle.net/4jffmwwz/ ... though, there's no `dropdown` so maybe one of `dropdown.js` and `createtab.js` are not "seeing" the changes made to the DOM by the "submit" button - without seeing that code, and the fact that adding links works as you want, the only conclusion is that one of the two files you haven't shown does NOT work — Jaromanda X, Jan 10 '17 at 04:13
but everything works through notepad, what in Chrome causes the link to not function? I am not understanding the logic sorry, it is appending properly so I do not see why the form will not work — , Jan 10 '17 at 04:15
`but everything works through notepad` - what does this even mean? notepad is not a browser ... you are making dynamic changes to the DOM in the web page ... this is not the same as editing the source of the webpage and reloading it — Jaromanda X, Jan 10 '17 at 04:16
Did you look at the fiddle link? https://jsfiddle.net/4jffmwwz/ ... see how it adds `` tags exactly where you want them ... this shows that the code you've posted works as desired - it's the code you haven't shown that doesn't work — Jaromanda X, Jan 10 '17 at 04:18
What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? — Makyen, Jan 10 '17 at 05:15

wOxxOm · Accepted Answer · 2017-01-10T08:53:38.647

0

The popup is a separate document (see extensions architecture) that can't be navigated outside the extension's internal URL, which is chrome-extension://blablablabla/

You need to add target="_blank" attribute to all links or use tabs API if you want to open the links in current tab (requires "tabs" permission or, much better, "activeTab"):

chrome.tabs.update({url: 'https://www.google.com'});

edited Jan 10 '17 at 08:53

answered Jan 10 '17 at 08:48

wOxxOm

65,848
11
132
136

you are amazing dude, appending target attribute woked, thank you! – Jan 10 '17 at 18:38

Appended links not working in Chrome but works through Notepad++?

1 Answers1