{"id":1421,"date":"2019-01-25T01:58:14","date_gmt":"2019-01-25T01:58:14","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1421"},"modified":"2019-01-06T21:21:44","modified_gmt":"2019-01-06T21:21:44","slug":"features-of-the-chrome-api-you-should-know","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2019\/01\/25\/features-of-the-chrome-api-you-should-know\/","title":{"rendered":"Features of the Chrome API you should\u00a0know"},"content":{"rendered":"
\n
\n
\n

<\/h1>\n<\/div>\n
\n
Photo by Jonatan Quintero<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n<\/div>\n
\n

So you think you know your way around building a Chrome extension? Well, that\u2019s all fine and dandy, but have you heard about context menus? Messaging between scripts? Adding a badge to your extension\u2019s icon? If all this sounds fascinating, you\u2019re in luck. We\u2019ll go over some cool features the Chrome API grants us.<\/p>\n

If you are interested in reading about how to build a Chrome extension, you can read my previous article here<\/a>. If you want to know how to publish one, you can read all about it here<\/a><\/p>\n

Context Menu<\/a><\/h3>\n

To put it simply, the context menu is the menu that appears when you right-click anywhere inside the browser. You can add your Chrome extension to that menu with a few simple steps:<\/p>\n

    \n
  1. Add context-menus<\/strong> to the permissions<\/strong> key in the manifest<\/li>\n
  2. Add a 16×16 icon (as it will be used in the context menu)<\/li>\n
  3. Add the following code to your background script:<\/li>\n<\/ol>\n
    \n
    \n
    \n
    \/\/An object representing what will be added to the context menu\nvar contextMenuItem = {                      \n\t\"id\": \"ExtensionName\",\n\t\"title\": \"Text that will appear in the context menu\",\n\t\"contexts\": [\"selection\"]\n};\n\n\/\/...\n\/\/ This will add the above object to the context menu\nchrome.contextMenus.create(contextMenuItem);  \n\n\/\/...\n\/\/Adding a listener for clicks\nchrome.contextMenus.onClicked.addListener(function(clickData) {         \n\tif (clickData.menuItemId === \"ExtensionName\" && clickData.selectionText) {\n\t\t\n\t}\n});<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
    Storage<\/a><\/h3>\n
    Similar to localStorage<\/a>, the Chrome API allows saving data as objects, which persists even when the browser is closed and reopened. Here are the necessary steps to allow storage usage in your extension:<\/p>\n
      \n
    1. Add storage <\/strong>to the permissions<\/strong> key in the manifest<\/li>\n
    2. To put data in the storage, you use:<\/li>\n<\/ol>\n
      \n
      \n
      \n
      chrome.storage.local.set({key: value}, function() {\n          \/\/Logic that happens after the data is set\n});<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
      3. To pull data from the storage you use:<\/p>\n
      \n
      \n
      \n
      chrome.storage.local.get(['key'], function(result) {\n             \/\/Logic that happens after the data is pulled from the storage \n             \/\/You can find it in result.key and result.value\n});<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
      \u26a0\ufe0f Do NOT put sensitive user data in the storage since it is not encrypted<\/p><\/blockquote>\n
      Messaging<\/a><\/h3>\n
      Chrome has another nifty feature which lets you pass messages along between scripts. For example, in your extension, you have your popup.js file that deals with things related to the popup window and you have a background script. If you wanted to have those two scripts communicate with each other you could use the following methods:<\/p>\n
      SendMessage<\/strong><\/p>\n
      \n
      \n
      \n
      chrome.runtime.sendMessage({\n    data:\"Hello World!\"\n    }, function(response) {\n      \/\/Logic to handle response from object receiving message\n    });<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
      Listen In On Incoming Messages<\/strong><\/p>\n
      \n
      \n
      \n
      chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){\n\t var str = JSON.stringify(message.data);\n  \/\/Use sendResponse to send a message back to the original sender\n  sendResponse({response: \"Hello back\"});\n});<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
      Badges<\/h3>\n
      You know them, you love them, and you can add them to the icon of your extension. Make sure to be aware that due to its small size, the text you want to display is limited to four characters<\/em><\/strong>.<\/p>\n
      To set the background color of the badge you use:<\/p>\n
      \n
      \n
      \n
      chrome.browserAction.setBadgeBackgroundColor({ color: \"HEXADECIMAL_COLOR\"}, callback);<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
      To set the text of the badge you use:<\/p>\n
      \n
      \n
      \n
      chrome.browserAction.setBadgeText(object details, function callback)<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
      In both methods, the callback is an optional parameter you can use after the method finishes its action.<\/p>\n<\/div>\n<\/div>\n<\/section>\n
      \n
      \n
      \n<\/div>\n
      \n
      \n
      Have other Chrome APIs you want to know about? Want to ask something? Feel free to reach out.<\/p>\n
      If you liked this article, clap away so that others can enjoy it as well! ?<\/em><\/p>\n<\/div>\n<\/div>\n<\/section>\n
       <\/p>\n
      Source:<\/p>\n
      Written by<\/p>\n
      \"Go<\/a><\/div>\n
      \n
      tomerpacific<\/a><\/h3>\n<\/div>\n
       <\/p>\n
      \"freeCodeCamp.org\"<\/a><\/div>\n
      \n
      freeCodeCamp.org<\/a><\/h3>\n
      Stories worth reading about programming and technology from our open source community.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      Photo by Jonatan Quintero on Unsplash So you think you know your way around building a Chrome extension? Well, that\u2019s all fine and […]<\/p>\n","protected":false},"author":2,"featured_media":1423,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[12,70,71,77,48,78,118,47],"tags":[],"class_list":["post-1421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloghassler-ec","category-chrome","category-chrome-devtools","category-chromebook","category-front-end","category-google","category-internet","category-medium"],"_links":{"self":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/comments?post=1421"}],"version-history":[{"count":2,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1421\/revisions"}],"predecessor-version":[{"id":1425,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1421\/revisions\/1425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media\/1423"}],"wp:attachment":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media?parent=1421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/categories?post=1421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/tags?post=1421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}