Tell me how to create a button on the panel in chrome? She should click on the link to open a new tab.

here you need a button

Open in new tab

  • Creating extensions for chromium is not a very complicated process. It requires a little knowledge of JavaScript and HTML. But if you plan to put your extension on public display and make it available through the Chrome Web Store, you will have to pay for the license (it costs only $ 5). And if the extension is purely for itself, then how it is done, you can read here: support.google.com/chrome/a/answer/2714278?hl=en - Ali Mamedov

1 answer 1

To make everything clear, I will give a small working example that helps to realize the task indicated in the question.

Creating an extension process is fairly simple and straightforward. Of course, to create complex extensions requires more serious knowledge of JavaScript.

And so, our extension should be able to open a page in a new tab by clicking on the icon.

To begin, create a manifest file that contains all the necessary data on the extension. The file should be called manifest.json. Here is its content.

{ "name": "HTML5", "version": "1", "manifest_version": 2, "icons": { "128": "128.png" }, "browser_action": { "default_title": "Нажмите на иконку HTML5", "default_icon" : "128.png" }, "permissions": ["tabs"], "background":{ "scripts": ["background.js"] } }

name is the name of our extension for Google Chrome. Under this name it will be shown in the list of extensions.

version - the version of the extension. Indicated at the discretion of the developer, but in accordance with certain generally accepted rules. You can read about it separately here.

manifest_version is the version of our manifest. This value is fixed and does not need to be changed.

icons - the main icon of our extension is 128 by 128. The file format is png

browser_action - coordinates interaction with the browser.

default_title - text that pops up when you hover over an icon.

default_icon - icon for the extension panel (we’ll click on it to follow the link)

permissions - specify the actions that our extension should access. In our case, this is an opportunity to work with TABs.

background - specify the data for the background page. What pages, scripts, etc. to load in the background. We just point to the background.js file.

When you click on the extension icon in the background, the code that lies in background.js will run and execute

The contents of the background.js file:

 chrome.browserAction.onClicked.addListener(function(activeTab){ chrome.tabs.create({ url: "https://www.w3.org/html/logo/" }); });

Create a folder and copy all three files into it: manifest.json, background.js, 128.png

enter image description here

Next, go to Google Chrome in the Extensions tab (Extensions) and click on the button "Load unpacked extension" (Load unpacked extension). We point to our folder (which contains three files) and the extension will be installed.

enter image description here

The icon will appear where it is waiting for :-). Click and go to the desired address.

enter image description here

  • 2
    Thank you so much! Exhaustive answer! Exactly what I need. - Dmitry