Chrome Extension: Go to site when extension icon is clicked

Viewed 360

I am new to making Chrome Extensions, and I wanted to make an extension that would open up a site (like www.tamoghnak.tk in a new tab. I have no clue on what to do. How would I do this? Thanks in advance!

1 Answers

What you are looking for is called a "browser action" (or "page action" if you only want the icon to be visible on certain websites).

You can declare a browser action, that is specify which icons to display, in your extension's manifest like so :

{
  "name": "My extension"
   ...
   "action": {
     // Declare icons for multiple sizes (optional)
     "default_icon": {
       "16": "images/icon16.png",
       "24": "images/icon24.png",
       "32": "images/icon32.png"
     },
     // Icon tooltip text (optional)
     "default_title": "My Extension",
   },
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
   ...
}

I also declared a "background script" in the manifest. In background.js you can add a click listener that will open your URL on click like this :

const extensionIconClickListener = () => {
   chrome.tabs.create({ url: 'https://your-url.com' });
};
        
chrome.browserAction.onClicked.addListener(extensionIconClickListener);
Related