{"id":4943,"date":"2021-07-20T13:14:55","date_gmt":"2021-07-20T07:44:55","guid":{"rendered":"https:\/\/blog.guvi.in\/?p=4943"},"modified":"2025-10-07T13:00:57","modified_gmt":"2025-10-07T07:30:57","slug":"build-and-publish-your-chrome-extension","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/build-and-publish-your-chrome-extension\/","title":{"rendered":"How to Build &#038; Publish your Chrome Extension in less than 5 Minutes!"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">In this detailed guide, we will walk you through the whole process of creating and publishing a Google Chrome Extension. The Chrome extension is very extensible and it seems like there is a plugin for everything you want with the browser&#8217;s functionality. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">You can also create your own Chrome extension to add specific functionality, as long as everything directs toward a singular function. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Don&#8217;t forget to upload your extensions<\/span> on Chrome Store or add them to the <span style=\"font-weight: 400;\">GitHub Repository Portfolio to win some brownie points from your recruiters.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As a blogger, It was exhausting to ensure manually one by one which links were redirecting to the preferred page and which links were dead-ends. I was stuck doing a repetitive task and I wished I could automate this process. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Unless I came across a Chrome Extension known as <\/span><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/link-checker\/olcpkmmoifipcklgnphbhdhbpfniijmb?hl=en-GB\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><span style=\"font-weight: 400;\">Link Checker<\/span><\/a><span style=\"font-weight: 400;\">, which runs through every webpage and displays a detailed overview of completed links, the number of good, bad, and warning links. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Google Chrome Extensions are made of different cohesive components, to be installed on your Chrome browser. They help to automate certain functions, tweak existing behavior, and improve performance. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">There are thousands of Chrome extensions like Link Checker that execute a simple functionality and enhance the User Experience not only limited to blogging. If you are a <a href=\"https:\/\/www.guvi.in\/blog\/create-your-own-ecommerce-website-like-amazon\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Shopify Store Developer<\/a>, you can install the <\/span><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/koala-inspector-inspect-s\/hjbfbllnfhppnhjdhhbmjabikmkfekgf?hl=en-GB\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><span style=\"font-weight: 400;\">Koala Inspector<\/span><\/a><span style=\"font-weight: 400;\">, to see what themes were used, if any new updates have been released, and product statistics. Similarly, <\/span><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/whatruns\/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en-GB\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><span style=\"font-weight: 400;\">Whatruns<\/span><\/a><span style=\"font-weight: 400;\"> lets you discover every technology that runs on a website, frameworks, web technology, themes, CMS, and even the Font.&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What&#8217;s Chrome Extension?<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">From a technical perspective, a Chrome Extension is just some CSS, HTML, and JavaScript that enables the user to add functionality to the Chrome Browser through some API. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The extension components include content scripts, background scripts, an options page, Logic files, and various UI elements. An extension&#8217;s component relies on its functionality and may or may not require every option.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The difference between a Chrome Extension and an application is that they are often easier to build &amp; deploy as they are centered around a singular function. The following tutorial will guide you to create a beginner-level- Chrome Extension that changes the background color of a paragraph. Before dwelling into all technical nitty-gritty jargon, here are some prerequisites:&nbsp;<\/span><\/p>\n\n\n\n<ul>\n<li><span style=\"font-weight: 400;\">Prior basic understanding of HTML and JavaScript.&nbsp;<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Experience with IDE. ( I suggest Visual Studio Code)&nbsp;<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">A folder in your system space to store Chrome Extension files like manifest.json, background.js, popup.html, logic files, and so on.&nbsp;<\/span><\/li>\n<\/ul>\n\n\n\n<p>Before diving into the next section, ensure you&#8217;re solid on full-stack development essentials like front-end frameworks, back-end technologies, and database management. If you are looking for a detailed Full Stack Development career program, you can join HCL GUVI\u2019s <strong><a href=\"https:\/\/www.guvi.in\/zen-class\/full-stack-development-course\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=How+to+Build+&amp;+Publish+your+Chrome+Extension\" target=\"_blank\" rel=\"noreferrer noopener\">Full Stack Development Course<\/a><\/strong> with placement assistance. You will be able to master the <a href=\"https:\/\/www.guvi.in\/blog\/guide-for-mern-stack\/\" target=\"_blank\" rel=\"noreferrer noopener\">MERN stack<\/a> (MongoDB, Express.js, React, Node.js) and build real-life projects.<\/p>\n\n\n\n<p>Additionally, if you want to explore JavaScript through a self-paced course, try HCL GUVI\u2019s <strong><a href=\"https:\/\/www.guvi.in\/courses\/web-development\/advanced-javascript\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=How+to+Build+&amp;+Publish+your+Chrome+Extension\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript certification course.<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Uncovering <strong>Google Chrome <\/strong>Extension Architecture <\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">An extension\u2019s architecture will depend on its functionality, <\/span>Although robust extensions like Grammarly, and Evernote require all the components to create their extension. <\/p>\n\n\n\n<ul>\n<li><span style=\"font-weight: 400;\">Manifest<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Background script<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Content script<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Options page<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">UI Elements<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Manifest<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Every extension contains a JSON-formatted <a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/mv3\/manifest\/\" target=\"_blank\" rel=\"noreferrer noopener\">manifest file<\/a>, named manifest.json. Google uses this file to acquire certain pieces of information about the extension you are going to develop.&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Background Script<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">It is also known as the <\/span>extension\u2019s event handler. The background.js contains listeners for browser events that are important to the extension. It lies dormant until an event is fired and <span style=\"font-weight: 400;\">then performs the instructed logic. An effective background script is only <\/span>executed<span style=\"font-weight: 400;\"> when it is needed and unloaded when it goes idle.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Content Script<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Extensions that read or write to web pages utilize a content script. The content script contains JavaScript that executes in the context of <\/span>your current webpage<span style=\"font-weight: 400;\">. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Content scripts can communicate with their parent extensions by exchanging messages and storing values using storage API. <\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Options page<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Just as extensions allow users to customize the Chrome browser, the options page enables customization of the extension. Options enable features and allow developers to pick the relevant functionality for their users. <\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">UI Elements<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">An extension\u2019s user interface should be minimal and purposeful. The UI should customize or enhance the browsing experience without distracting <\/span>it. Most extensions have a browser action or page action but can contain other forms of UI, such as context menus, the use of the Omnibox, or the <span style=\"font-weight: 400;\">creation of a keyboard shortcut.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Extension UI pages, such as a popup, can contain ordinary HTML pages with JavaScript logic. Extensions can also be called tabs. Create our window. Open () to display additional HTML files present in the extension.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Creating your first project&nbsp;<\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The first thing we need to do is create the project folder and all the files we need for our extension. Let&#8217;s start by creating a new directory that we&#8217;ll call &#8220;Color Shuffle Demo Extension.&#8221; Chrome allows us to load up the plugin by pointing it at a folder that contains all files such as manifest.json and additional HTML files.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Now we will create a manifest file and later append it with Background and Content Script.&nbsp;<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n \"manifest_version\": 2,\n \"name\": \"Color Shuffle Demo Extension\",\n \"version\": \"1.0.0\",\n \"description\": \"Sample description\",\n \"short_name\": \"Colours\",\n \"permissions\": &#91;\"activeTab\", \"declarativeContent\", \"storage\", \"&lt;all_urls&gt;\"],\n },\n<\/code><\/pre>\n\n\n\n<ul>\n<li><strong>The description <\/strong>and <strong>name<\/strong> can be anything you&#8217;d like.<\/li>\n\n\n\n<li><strong>Version<\/strong> is your Chrome Extension Version<\/li>\n\n\n\n<li><strong>Short_Name<\/strong> is a short version of your extension&#8217;s name. It is optional. <\/li>\n\n\n\n<li>The <strong>permissions<\/strong> depend on what the extension needs to do, and what are its parameters. A list of all permissions is available on Chrome&#8217;s extension docs. I suggest you give it a read. <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Creating Content.Js<\/h3>\n\n\n\n<p>Content scripts are files that run in the context of your web pages. It uses DOM (Document Object Model), which is able to discover the web pages that the browser visits, modify them, and pass the information to their parent extension. Content scripts read and modify the DOM of web pages the browser visits.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>chrome.runtime.onMessage.addListener(gotMessage);\nfunction gotMessage(message,sender,sendresponse)\n{\n\tconsole.log(message.txt);\n\tlet paragraphs = document.getElementsByTagName(\"p\");\n\tfor(elt of paragraphs)\n\t{\n\t\telt.style&#91;'background-color'] = '#228B22';\n\t}\n}<\/code><\/pre>\n\n\n\n<p>You are free to pick any color you&#8217;d like. We have picked &#8220;Forest Green.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating Background.Js<\/h3>\n\n\n\n<p>Background.js will overcome the limitations of Content Script. A content script has access to the current webpage but it is limited to only one API. That&#8217;s why we need a type of script that has access to all Chrome APIs. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(\"Background running\");\nchrome.browserAction.onClicked.addListener(IconClicked);\nfunction IconClicked(tab)\n{\n\tlet msg = {\n\t\ttxt : \"Hello\"\n\t}\n\tchrome.tabs.sendMessage(tab.id,msg);\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"500\" height=\"400\" src=\"http:\/\/blog.guvi.in\/wp-content\/uploads\/2021\/07\/1WVOgJbOnBqTaToPOc3Kz_Q.png\" alt=\"Creating Background.Js\" class=\"wp-image-4946\" srcset=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2021\/07\/1WVOgJbOnBqTaToPOc3Kz_Q.png 500w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2021\/07\/1WVOgJbOnBqTaToPOc3Kz_Q-300x240.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" title=\"\"><\/figure>\n\n\n\n<p> <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Content Scripts have some limitations. They can&#8217;t use several APIs such as Chrome* with the exception of extension, runtime, i18n, and storage. <\/p>\n\n\n\n<p>Nevertheless, they can communicate with their parent extension by exchanging messages with a background script and storing certain values using storage APIs. <\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Browser Action <\/h3>\n\n\n\n<p>The browser Action function adds a little icon next to your Chrome address bar, your browser can listen for the clicks and perform the single function. Having a popup &amp; title is completely at the developer&#8217;s discretion. The browser action icons in Chrome are 16 dips in width and height. However, Chrome will automatically select and scale it to fill the 16-dip space. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"browser_action\": {\n   \"default_title\": \"Change the color of the paragraph\",\n   \"default_popup\": \"popup.html\",\n   \"default_icon\": {\n     \"16\": \"icons\/icon16.png\",\n     \"32\": \"icons\/icon32.png\"\n   }\n },\n \"icons\": {\n    \"16\": \"icons\/icon16.png\",\n    \"32\": \"icons\/icon32.png\",\n    \"48\": \"icons\/icon48.png\",\n    \"128\": \"icons\/icon128.png\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Appending <\/h3>\n\n\n\n<p>Now open mensifest.json and append the content and background script. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n \"manifest_version\": 2,\n \"name\": \"Color Shuffle Demo Extension\",\n \"version\": \"1.0.0\",\n \"description\": \"Sample description\",\n \"short_name\": \"Colours\",\n \"permissions\": &#91;\"activeTab\", \"declarativeContent\", \"storage\", \"&lt;all_urls&gt;\"],\n\"content_scripts\" : &#91;\n\t\t{\n\t\t\t\"matches\" : &#91;\n\t\t\t\t\"&lt;all_urls&gt;\"\n                 ],\n                  \"js\" : &#91;\"content.js\"]\n        }\n    ],\n    \"background\" : {\n                  \"scripts\" : &#91;\"background.js\"]\n    },\n    \"browser_action\" : {\n   \"default_title\": \"Change the color of the paragraph\",\n   \"default_popup\": \"popup.html\",\n   \"default_icon\": {\n     \"16\": \"icons\/icon16.png\",\n     \"32\": \"icons\/icon32.png\"\n   }\n },\n \"icons\": {\n    \"16\": \"icons\/icon16.png\",\n    \"32\": \"icons\/icon32.png\",\n    \"48\": \"icons\/icon48.png\",\n    \"128\": \"icons\/icon128.png\"\n    }\n}\n      \n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Testing &amp; Initializing <\/h2>\n\n\n\n<p>Once the scripts are ready with the codes, let&#8217;s test and add them to the Chrome extension. Head over to chrome.\/\/extensions and perform the following steps. <\/p>\n\n\n\n<ul>\n<li>Enable the Developer mode option on the top right-side corner of the page. <\/li>\n\n\n\n<li>Click the load unpacked button. <\/li>\n\n\n\n<li>Select the folder directory, where we have written the code and open it. <\/li>\n<\/ul>\n\n\n\n<p>After this, the Chrome extension is loaded into your browser. For debugging you can visit <a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/mv2\/tut_debugging\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Chrome Documentation<\/a>. <\/p>\n\n\n\n<p>After the installation, run your Extension and you will have an output like this. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"598\" height=\"397\" src=\"http:\/\/blog.guvi.in\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-20-at-9.55.59-AM.png\" alt=\"Testing &amp; Initializing \" class=\"wp-image-4953\" srcset=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-20-at-9.55.59-AM.png 598w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-20-at-9.55.59-AM-300x199.png 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Publish your Chrome Extension <\/h2>\n\n\n\n<p>For publishing the extension in the Chrome Web Store, one needs to have a developer account. There is a one-time signup fee of $5 to publish your extensions. With this account, you can publish as many as 20 extensions in Chrome Store. After successful signup, the next step is to log in to your developer&#8217;s account and go to your developer&#8217;s dashboard. <\/p>\n\n\n\n<p>There you will come across the &#8220;Add New Button&#8221; button which will redirect you to a page to upload a ZIP file. Don&#8217;t forget to create a Zip file beforehand of your folder directory comprising JSON and JavaScript files. <\/p>\n\n\n\n<p>Upload your Zip package, and give a relevant description of your extension. Please make sure that you clearly explain the singular function of your extension. Moreover, you can also Screenshots and a YouTube tutorial video to guide your users, on how to interact with your plugin. <\/p>\n\n\n\n<p>You can also edit the icons of your extension and configure your extension at any point in time. To see how everything you configured will look on the Chrome Web store, preview the changes. If everything goes smoothly, hit &#8220;Publish.&#8221; <\/p>\n\n\n\n<p>Congratulations, you have just uploaded your first Google Chrome Extension. <\/p>\n\n\n\n<p>Kickstart your Full Stack Development journey by enrolling in HCL GUVI&#8217;s certified <strong><a href=\"https:\/\/www.guvi.in\/zen-class\/full-stack-development-course\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=How+to+Build+&amp;+Publish+your+Chrome+Extension\" target=\"_blank\" rel=\"noreferrer noopener\">Full Stack Development Course <\/a><\/strong>with placement assistance where you will master the MERN stack (MongoDB, Express.js, React, Node.js) and build interesting real-life projects. This program is crafted by our team of experts to help you upskill and assist you in placements. <\/p>\n\n\n\n<p>Alternatively, if you want to explore JavaScript through a self-paced course, try HCL GUVI\u2019s <strong><a href=\"https:\/\/www.guvi.in\/courses\/web-development\/advanced-javascript\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=How+to+Build+&amp;+Publish+your+Chrome+Extension\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript course.<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summing up <\/h2>\n\n\n\n<p>It may have a bit of a learning curve, but creating a Google Chrome Extension from scratch is a great way to create an optimal user experience and tweak your browser functionality. What&#8217;s more, is that you can showcase your new features to your colleagues and prospective recruiters. <\/p>\n\n\n\n<p>In case you need help with any of the programming curves, head over to HCL GUVI. We host 100+ premium tech courses ranging from web development, and data science to testing and cloud computing for one&#8217;s subscription price. Most of the courses are curated under the guidance of IIT-M professors and industry leaders who have built disruptive tech from the ground up. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this detailed guide, we will walk you through the whole process of creating and publishing a Google Chrome Extension. The Chrome extension is very extensible and it seems like there is a plugin for everything you want with the browser&#8217;s functionality. You can also create your own Chrome extension to add specific functionality, as [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":4960,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"views":"7013","authorinfo":{"name":"Tushar Vinocha","url":"https:\/\/www.guvi.in\/blog\/author\/tushar\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2021\/07\/Photocentric-Work-from-Anywhere-Blog-Banner-1-300x169.png","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2021\/07\/Photocentric-Work-from-Anywhere-Blog-Banner-1.png","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/4943"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=4943"}],"version-history":[{"count":29,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/4943\/revisions"}],"predecessor-version":[{"id":88934,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/4943\/revisions\/88934"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/4960"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=4943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=4943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=4943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}