Share via

My address bar cannot search for anything. I tried creating an extension that allows me to paste what I input in the address bar into Google search, but it's not working. Can you help me identify the issue?"

火火HN 0 Reputation points
2023-09-28T15:02:42.6566667+00:00 
manifest.json

{ 

  "manifest_version": 3, 

  "name": "Auto Fill Google Search", 

  "version": "1.0", 

  "description": "Auto fill Google search with address bar input", 

  "permissions": ["tabs"], 

  "background": { 

    "service_worker": "background.js" 

  }, 

  "action": { 

    "default_popup": "popup.html", 

    "default_icon": { 

      "16": "icon.png", 

      "48": "icon.png", 

      "128": "icon.png" 

    } 

  }, 

  "icons": { 

    "16": "icon.png", 

    "48": "icon.png", 

    "128": "icon.png" 

  } 

} 

popup.html

<!DOCTYPE html> 

<html> 

<head> 

  <title>Auto Fill Google Search</title> 

  <script src="popup.js"></script> 

</head> 

<body> 

  <button id="fillSearch">Fill Google Search</button> 

</body> 

</html> 

popup.js

document.getElementById('fillSearch').addEventListener('click', function() {   chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {     const addressBarInput = tabs[0].url;     const encodedInput = encodeURIComponent(addressBarInput);     const googleSearchURL = 'https://www.google.com/search?q=' + encodedInput;     chrome.tabs.create({url: googleSearchURL});   }); });

background.js

chrome.runtime.onInstalled.addListener(() => { 

  console.log('Extension installed.'); 

});
Microsoft Edge | Microsoft Edge development

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Anonymous
    2023-09-29T07:13:43.3633333+00:00

    Hi @火火HN,

    Your addEventListener may have been added to an "undefined" element even though you have used getElementById before. Usually, you'll have to add an onload event to make sure the button is actually found. You can modify your popup.js into this one:

    window.addEventListener("load", (event) => {
    document.getElementById('fillSearch').addEventListener('click', function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {     
        const addressBarInput = tabs[0].url;     
        const encodedInput = encodeURIComponent(addressBarInput);     
        const googleSearchURL = 'https://www.google.com/search?q=' + encodedInput;     
        chrome.tabs.create({url: googleSearchURL});   
        }); 
    });
});

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards,

    Shijie Li

    1 person found this answer helpful.
    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.