DEV Community

Cover image for Created a Google Extension Plugin
Kenta Takeuchi
Kenta Takeuchi

Posted on • Originally published at bmf-tech.com

Created a Google Extension Plugin

#javascript #googlechromeextension

This article was originally published on bmf-tech.com.

When I wanted to search in English on Google, I used bookmarks to access it, but I thought it would be convenient to do it with a plugin, so I created one.

This plugin might be somewhat useful for niche users who hide the default bookmarks and use a plugin called Bookolio (which makes bookmarks easier to see) ← me.

Environment

  • Google Chrome
  • JavaScript

Specifications

There are various types of plugins, but what I am creating this time is this:

Plugin Image

When you click the plugin icon, it simply opens the English version of Google in a new tab.

Since it's super simple, there is room for improvement in the specifications. ()

Preparation

First, create the folder and files.

└── search_by_english
    ├── background.js
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   └── icon48.png
    └── manifest.json
Enter fullscreen mode Exit fullscreen mode

Please prepare the icons as needed.

The background.js is the JavaScript that runs in the background. For more details, please refer to the Developer's Guide.

Edit manifest.json

manifest.json

{
  "name": "Open A Google English Edition In A New Tab",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Open a Google English Edition in a new tab.",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "browser_action": {
      "default_icon": "icons/icon48.png"
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

The description varies depending on the type of plugin. It's not particularly difficult, so for details, please refer to the Developer's Guide.

Edit background.js

background.js

I referred to the code from Chrome extension: open link in new tab?. You should get a general idea by looking at it.

For more details, please refer to the documentation (ry) Developer's Guide.

chrome.browserAction.onClicked.addListener(function(activeTab){
  var newURL = "https://www.google.co.jp/?hl=en&gws_rd=cr&ei=O2OgV4jODcS30gSs1Ihw";
  chrome.tabs.create({ url: newURL });
});
Enter fullscreen mode Exit fullscreen mode

Basically, you write in JavaScript, but you will be utilizing the API provided by Google regarding browser operations.

Thoughts

I would also like to try developing plugins for Atom.

References

Top comments (0)