How to give Chrome Extension ability to Search a certain site

Question

I'm trying to make a Chrome browser extension that lets you search my site. The search box on the site works. But when I add that same HTML code into my extension file, it doesn't work. Here is the code for my search box:

<form class="text-center" id="searchGuides" action="https://www.arcanumgaming.com/game" method="GET">
     <input type="hidden" name="a" value="search" />
     <input type="hidden" name="g" value="grand-theft-auto-v" />
     <div >
            <input type="text" name="searchVal" class="searchField" placeholder="Search Game Content"  />
     </div>
     <div >
            <a href="#" class="searchBtn" onclick="document.getElementById('searchGuides').submit();">Search Content</a>
     </div>
</form>

score 2 · Answer 1 · answered May 13 '15 at 03:03

Inline JavaScript will not be executed. This restriction bans both inline blocks and inline event handlers (e.g. <button onclick="...">).

Inline JavaScript will not be executed

You will have to do something like this:

file.html

<script src="file.js"></script>
...
<form class="text-center" id="searchGuides" action="https://www.arcanumgaming.com/game" method="GET">
     <input type="hidden" name="a" value="search" />
     <input type="hidden" name="g" value="grand-theft-auto-v" />
     <div >
            <input type="text" name="searchVal" class="searchField" placeholder="Search Game Content"  />
     </div>
     <div >
            <a href="#" class="searchBtn">Search Content</a>
     </div>
</form>

file.js

function clickHandler() {
  document.getElementById('searchGuides').submit();
}
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('a').addEventListener('click', clickHandler);
});

How to give Chrome Extension ability to Search a certain site

1 Answers1