How to add a click event to a button in a chrome extension?

Question

I am trying to create a very simple chrome extension that open multiple tabs of LinkedIn searching different keywords that I type in.

Since this is my first extension, most of my codes are based on this extension, which is very similar to my idea.

The problem is when I click my "search" button, nothing happens. I just started coding for a week so I'd greatly appreciate any help!

Besides knowing what is wrong with the codes, is a background script necessary in this case?

Thanks!

Here are my codes:

Manifest.json

{ "manifest_version": 2, "name": "Search Assistant", "description": "This extension makes LinkedIn Search easy.", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["myscript.js"] } ], "chrome_url_overrides" : { "newtab": "newtab.html" }, "background": { "scripts": ["bg.js"] } }

Popup.html

<!doctype html> <head> <style type="text/css"> body{ font family: Helvetica, Arial, sans; font-size: 12px; } #instruction{ padding-bottom: 10px; } #searcharea{ padding-bottom: 10px; } #search{ padding-bottom: 10px; float: left; } #companies{ white-space: nowrap; overflow:auto; } </style> <style type="text/javascript" src="popup.js"></style> </head> <body> <div id="instruction">Companies you want to search for:</div> <div id="searcharea"><textarea rows="20" cols="80" id="companies" wrap="soft" tabindex="1"></textarea></div> <div id="search"> <button id="btn1" tabindex="2">Search</button> </div> <p id="demo"></p> </body> </html>

Popup.js

document.addEventListener('DOMContentLoaded', function (){ document.getElementById('btn1').addEventListener('click', loadSites); document.getElementById('companies').focus(); }); function loadSites(e){ var companies = document.getElementById('companies').value.split('\n'); for(var i=0; i<companies.length; i++){ thecompany = companies[i].trim(); thesearchurl = 'https://www.linkedin.com/vsearch/c?type=companies&keywords=' + thecompany; chrome.extension.create({url: thesearchurl, selected:false}) } }

Napuu · Accepted Answer · 2016-06-05 16:09:36Z

2

You have 2 slight errors right now. Firstly you should use script-tag instead of style to include javascript files. Second: it is better to load javascript after your page is ready. To fix these follow steps below

Remove line <style type="text/javascript" src="popup.js"></style>
Add this <script type="text/javascript" src="popup.js"></script> to a line right before </body>.

answered Jun 5, 2016 at 16:09

Napuu

8328 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

adrienk Over a year ago

Fixed. Thanks for pointing out. However the button is still not responding.

Napuu Over a year ago

@adrienk So you did both of those steps?

adrienk Over a year ago

Yes I did. Still the same.

adrienk Over a year ago

popup.js:11 Uncaught TypeError: chrome.extension.create is not a function

adrienk Over a year ago

Oh it's solved! I changed it to chrome.tabs.create! Thanks so much!

|

Collectives™ on Stack Overflow

How to add a click event to a button in a chrome extension?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related