Automatically Type In Current Tab Search Bar-Chrome Extensions

Question

I am just learning JavaScript primarily to automate searches on a specific website and compare some data that is gathered from those searches. Thus I was wondering if it would be possible to do such a thing with a search bar in that site with JavaScript in my chrome extension I want to create.

Note: an example of a search bar in a website would be like YouTube's search bar

Edit: After doing far more research, I found that forum.submit might be of use, but I am not too sure.

EDIT 2:

extension_ui.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>extension_ui</title>
</head>
<body>
    <button>Start</button>
    <script src="find_time_slots.js" charset="utf-8"></script>
</body>
</hmtl>

find_time_slots.js

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('button').addEventListener('click',onclick,false)

    function onclick(res){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.executeScript(
            res.tabNum,
            {code: 'document.getElementById("search").value = "overwatch";'}
          );
        })
    }

},false)

content.js

chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
    sendResponse({tabNum: sender.id})
});

Although I am not getting any errors, it does not update the search bar(on youtube) to ethier have "overwatch" as its value or show up in the youtube page.

score -1 · Accepted Answer · edited Feb 12 '20 at 10:10

-1

You need find the id of search bar. In youtube the id is search;

In your popup.js using chrome.tabs.executeScript and it need put in a listener event.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.executeScript(
    tabs[0].id,
    {code: 'document.getElementById("search").value = "' + /*you value*/ + '";'}
  );
});

Hope that can help you

edited Feb 12 '20 at 10:10

Iván Nokonoko

4,888
2
19
27

answered Feb 12 '20 at 04:46

tuanngocptn

1,241
13
21

so the /*you value*/ would be the value I want to put in, like 'JavaScript Tutorials' ? Also, this was very helpful. Thanks! – Stove Games Games Feb 12 '20 at 04:51
1

Now that I think about it, when I run the script, do I need to click search to commence the search? or does it do it automatically? – Stove Games Games Feb 12 '20 at 04:54
that depend on your code. If you want that automatic. Make sure the code run after page load. – tuanngocptn Feb 12 '20 at 06:10
Now I have a permissions error. Any idea how to fix it? Unchecked runtime.lastError: Cannot access contents of the page. Extension manifest must request permission to access the respective host. Edit: I fixed the permissions by adding "activeTab" in manifest – Stove Games Games Feb 12 '20 at 07:47
add the url page you want to access to permissions key in your ```manifest.json``` file – tuanngocptn Feb 12 '20 at 07:50
Now I have another error: Uncaught TypeError: Cannot read property 'query' of undefined – Stove Games Games Feb 12 '20 at 07:51
like this ```"permissions": ["activeTab","declarativeContent", "storage", "*://example.com/*"],``` – tuanngocptn Feb 12 '20 at 07:51
you can check the error ```Uncaught TypeError: Cannot read property 'query' of undefined``` here https://stackoverflow.com/questions/26415925/chrome-tabs-getcurrent-or-tabs-query – tuanngocptn Feb 12 '20 at 07:54

Automatically Type In Current Tab Search Bar-Chrome Extensions

1 Answers1