{"id":6535,"date":"2025-02-25T20:43:45","date_gmt":"2025-02-25T20:43:45","guid":{"rendered":"https:\/\/www.solutionstreet.com\/blog\/?p=6535"},"modified":"2025-02-25T20:43:59","modified_gmt":"2025-02-25T20:43:59","slug":"understanding-modern-chrome-extensions-a-developers-guide","status":"publish","type":"post","link":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/","title":{"rendered":"Understanding Modern Chrome Extensions: A Developer\u2019s Guide"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"765\" height=\"297\" src=\"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png\" alt=\"\" class=\"wp-image-6536\" style=\"width:674px;height:auto\" srcset=\"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png 765w, https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle-300x116.png 300w\" sizes=\"auto, (max-width: 765px) 100vw, 765px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Web extensions have become an essential tool for enhancing browser functionality, offering users customized experiences ranging from ad-blocking and password management to productivity tools and automation scripts. Whether you&#8217;re looking to build a simple extension to streamline your workflow or a feature-rich tool for a broader audience, understanding the development process is key. In this article, we\u2019ll walk through the fundamentals of building a Chrome extension, covering its key components, setup, and best practices. We\u2019ll also take a brief look at Manifest V3, Google\u2019s latest update to the extension framework. We\u2019ll dive into how it impacts development and the controversy surrounding it. Whether you&#8217;re a beginner or an experienced developer, this article will equip you with the knowledge to create and refine your own Chrome extension. Trust me, it\u2019s easier than you think!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a Chrome Extension?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before we can get started developing a Chrome Extension we should first define what a Chrome Extension is. A Chrome extension is a small software program that enhances the functionality of the Google Chrome browser by modifying or interacting with web pages and browser features. These extensions allow users to personalize their browsing experience, automate tasks, and introduce new capabilities that aren&#8217;t natively available in Chrome.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Extensions serve a variety of purposes and can be found in many different categories. Some of the most common use cases include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ad Blockers<\/strong>: Prevent unwanted ads from displaying on web pages.<\/li>\n\n\n\n<li><strong>Productivity Tools<\/strong>: Enhance efficiency with features like tab management, note-taking, or task automation.<\/li>\n\n\n\n<li><strong>Password Managers<\/strong>: Store and autofill login credentials securely.<\/li>\n\n\n\n<li><strong>Development Scripts<\/strong>: Assist developers with tools for extracting color codes, running custom scripts on websites, and even analyzing and debugging web traffic.<\/li>\n\n\n\n<li><strong>Security &amp; Privacy Tools<\/strong>: Block tracking scripts, enforce HTTPS, or prevent malicious websites from loading.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see this is only the tip of the iceberg \u2013 the possibilities with Chrome Extensions are almost endless and you can tailor your extension to fit whatever your needs may be. By leveraging Chrome\u2019s extension APIs, we can integrate extensions with browser features like bookmarks, tabs, and storage. These lightweight extensions run seamlessly in the background or as interactive popups, making Chrome extensions a powerful way to customize and improve the web browsing experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key<strong> <\/strong>Components<strong> <\/strong>of a Chrome Extension<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A Chrome extension is made up of several key components that work together to enhance the browser\u2019s functionality. Each component has a specific role, whether it\u2019s defining the extension\u2019s behavior, handling background tasks, modifying web pages, or providing user interaction. Understanding these components is crucial for building a well-structured and efficient extension.<\/p>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\"><strong>Manifest File: The Blueprint of Your Extension<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At the core of every Chrome extension is the <strong>manifest file<\/strong> (manifest.json). This file serves as the extension\u2019s blueprint, defining its metadata, permissions, background processes, and interactions with web pages. The manifest determines which browser APIs the extension can access and specifies how different scripts are loaded. It is particularly important in Manifest V3, the latest extension framework, as it enforces stricter security measures, such as requiring service workers instead of persistent background scripts. Without a properly configured manifest file, the extension simply won\u2019t function.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a simple example:<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>{\n\n\u00a0\u00a0\"manifest_version\": 3,\n\n\u00a0\u00a0\"name\": \"My Chrome Extension\",\n\n\u00a0\u00a0\"version\": \"1.0\",\n\n\u00a0\u00a0\"description\": \"A simple Chrome extension example.\",\n\n\u00a0\u00a0\"permissions\": &#91;\"storage\", \"tabs\"],\n\n\u00a0\u00a0\"host_permissions\": &#91;\"https:\/\/*\/*\"],\n\n\u00a0\u00a0\"background\": {\n\n\u00a0\u00a0\u00a0\u00a0\"service_worker\": \"background.js\"\n\n\u00a0\u00a0},\n\n\u00a0\u00a0\"action\": {\n\n\u00a0\u00a0\u00a0\u00a0\"default_popup\": \"popup.html\",\n\n\u00a0\u00a0\u00a0\u00a0\"default_icon\": \"icon.png\"\n\n\u00a0\u00a0},\n\n\u00a0\u00a0\"content_scripts\": &#91;\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"matches\": &#91;\"https:\/\/*\/*\"],\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"js\": &#91;\"content.js\"]\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0]\n\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Background Scripts: The Brain Behind the Extension<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Background scripts are one of the most <strong>critical <\/strong>components of a Chrome extension. They run <strong>independently <\/strong>of any specific webpage, allowing the extension to handle tasks that need to persist across browser sessions. These scripts listen for events such as browser actions, tab changes, and network requests, enabling the extension to respond dynamically without requiring direct user interaction. A lot of your core logic will live in these scripts and will include most of your listeners, API calls, and storage functions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, if your extension needs to monitor when a user visits a particular website or automate a process in the background (like checking for updates or storing data), the background script is responsible for handling those operations. In Manifest V3, background scripts are replaced by <strong>service workers<\/strong>, which only run when needed and shut down when idle to improve efficiency. The bottom line here is that anything that\u2019s related to your extension as a whole that isn\u2019t specific to one page or tab, should be placed in your background script. For example, using a background script to periodically check for new data from an API and notify the user if an update is available. This can be particularly useful for extensions that monitor stock prices, weather updates, or other time-sensitive information.<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following is a simple example of how a <strong>background script<\/strong> can track visits to different web pages using Chrome\u2019s Storage API. This script only increments the visit count when a user navigates to a predefined list of websites (e.g., washingtonpost.com, reddit.com, espn.com). Each visit is recorded and stored separately for each domain, allowing the extension to keep track of how often the user visits each tracked site. This is a basic implementation, but it demonstrates how you can build upon it to collect more detailed browsing data or integrate it with other extension features.<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>chrome.runtime.onInstalled.addListener(() => {\n\n\u00a0\u00a0chrome.storage.sync.set({ visits: {} }, () => {\n\n\u00a0\u00a0\u00a0\u00a0console.log(\"Visit tracking initialized.\");\n\n\u00a0\u00a0});\n\n});\n\nchrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {\n\n\u00a0\u00a0if (changeInfo.status === \"complete\" &amp;&amp; tab.url) {\n\n\u00a0\u00a0\u00a0\u00a0const trackedSites = &#91;\"washingtonpost.com\", \"reddit.com\", \"espn.com\"];\n\n\u00a0\u00a0\u00a0\u00a0const url = new URL(tab.url);\n\n\u00a0\u00a0\u00a0\u00a0if (trackedSites.some(site => url.hostname.includes(site))) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chrome.storage.sync.get(\"visits\", (data) => {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let visits = data.visits || {};\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0visits&#91;url.hostname] = (visits&#91;url.hostname] || 0) + 1;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chrome.storage.sync.set({ visits }, () => {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Visited ${url.hostname}: ${visits&#91;url.hostname]} times`);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n}); \/\/ background script<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Content Scripts: The Bridge Between the Extension and Web Pages<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While background scripts handle all your tasks behind the scenes, <strong>content scripts<\/strong> are just as important as they are responsible for interacting with web pages. These scripts are injected into specified sites and allow the extension to modify the page\u2019s content, manipulate the DOM, or extract information. Content scripts essentially act as the extension\u2019s way of integrating with the web. This is how extensions like ad blockers, theme customizers, and automation tools work to dynamically alter web pages to enhance user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While content scripts are as important as background scripts, it\u2019s important to note that content scripts do not have direct access to Chrome\u2019s extension APIs. Instead, they communicate with the background script through <strong>message passing<\/strong>, ensuring a secure and structured way of exchanging information. This separation enhances security, preventing malicious extensions from directly manipulating browser functions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, the following <strong>content script<\/strong> changes all page text to uppercase when a message is received from the background script:<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\u00a0\n\n\u00a0\u00a0if (message.action === \"uppercaseText\") {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.body.innerHTML = document.body.innerHTML.toUpperCase();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sendResponse({ status: \"Text converted to uppercase\" });\n\n\u00a0\u00a0}\n\n}); \/\/ content script<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This next script listens for a message from the background script and, when triggered, modifies the DOM by transforming all text to uppercase. To activate this content script from the background script or popup, you would send a message like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {\n\n\u00a0\u00a0chrome.tabs.sendMessage(tabs&#91;0].id, { action: \"uppercaseText\" }, (response) => {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(response.status);\n\n\u00a0\u00a0});\n\n}); \/\/ background script<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This demonstrates how <strong>background and content scripts work together<\/strong>, enabling extensions to interact with web pages while maintaining a secure and structured approach to executing actions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Permissions &amp; APIs: Controlling What Your Extension Can Do<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For your extension to function properly, it must declare permissions in the manifest file, as shown previously. Permissions determine what browser data or functionality your extension can access, such as reading tabs, modifying web pages, or storing user settings. Chrome\u2019s extension APIs provide a powerful set of tools for developers, allowing them to work with bookmarks, history, storage, and even intercept network requests.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a user installs a Chrome extension, they are shown a prompt listing the permissions the extension requires, allowing them to review what data and browser features it will have access to. Because of this, permissions should be used judiciously \u2013 requesting excessive permissions can deter users from installing your extension and may even lead to rejection from the Chrome Web Store. To improve security and user trust, Chrome provides optional permissions, allowing extensions to request access only when needed rather than requiring all permissions upfront during installation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, if your extension needs access to a user&#8217;s bookmarks and interact with their tabs, you would declare it in the <strong>manifest.json<\/strong> file like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>\"permissions\": &#91;\"bookmarks\", \u201ctabs\u201d]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now you\u2019re able to use these APIs in your background script to fetch a user\u2019s bookmarks or to view tab data. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>chrome.bookmarks.getTree((bookmarks) => {\n\n\u00a0\u00a0console.log(\"User's bookmarks:\", bookmarks);\n\n});\n\nchrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {\n\n\u00a0\u00a0console.log(\"Current tab:\", tabs&#91;0].url);\n\n}); \/\/ background script<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s important to note that using Chrome\u2019s APIs like this is only valid in background scripts. As mentioned earlier, if a content script needs this information, it must communicate with the background script using the Chrome Messages API to request the data. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>chrome.runtime.sendMessage({ action: \"getBookmarks\" }, (response) => {\n\n\u00a0\u00a0console.log(\"Bookmarks:\", response.bookmarks);\n\n}); \/\/ content script<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;For a full list of available APIs and permissions, refer to the official <a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/reference\/api\" target=\"blank\"><strong>Chrome Extensions API documentation<\/strong><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Popup UI: Providing User Interaction<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Many Chrome extensions offer a popup UI, a small interactive interface that appears when the extension icon is clicked. This UI allows users to interact with the extension without navigating away from their current webpage. It can display settings, provide shortcuts, or execute commands directly within the browser. Popups are often used for quick access to features, such as enabling or disabling the extension, running a function, or showing real-time data. Since popups are part of the extension\u2019s front-end experience, they are typically built using standard HTML, CSS, and JavaScript.<\/p>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 27%\"><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">A great example of a popular Chrome extension is uBlock Origin. While its interface appears simple, it offers powerful functionality, allowing users to interact seamlessly with both the extension and the browser in various ways. The only constraint to keep in mind is that you are developing a Popup for an extension, so it\u2019s best to keep it lightweight and focused, avoiding unnecessary complexity.\u00a0 If your extension requires more advanced functionality or a richer user interface, consider providing dedicated static pages that users can access from the extension for a more configurable and immersive experience.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"772\" src=\"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-25-at-1.54.15\u202fPM.png\" alt=\"\" class=\"wp-image-6564 size-full\" srcset=\"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-25-at-1.54.15\u202fPM.png 508w, https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-25-at-1.54.15\u202fPM-197x300.png 197w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Manifest V3: Understanding the Impact and Controversy<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What is Manifest V3?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Manifest V3 is Google\u2019s latest update to the Chrome extension framework and API. It is designed to enhance security, improve performance, and reduce resource consumption. While these updates improve security and performance, they also introduce new challenges for developers, especially those used to the flexibility of Manifest V2. The most significant change is the <strong>replacement of persistent background scripts with service workers<\/strong>, forcing extensions to adopt an event-driven approach where scripts only run when needed and shut down when idle. Additionally, Manifest V3 removes the <strong>webRequest API&#8217;s blocking capabilities<\/strong>, replacing it with the <strong>declarativeNetRequest API<\/strong>, which restricts developers to predefined filtering rules instead of dynamically intercepting network traffic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Why is Manifest V3 Controversial?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While Google positions Manifest V3 as a step toward a more secure and efficient browsing experience, it has faced strong criticism, especially from developers of ad blockers, privacy tools, and automation extensions. The biggest concern is the <strong>removal of dynamic request blocking<\/strong>, which has made ad blockers less effective by limiting their ability to inspect and modify web requests in real time. Many argue this benefits advertisers at the expense of user control. Furthermore, the transition to <strong>service workers<\/strong> has made developing complex extensions more challenging, as scripts no longer persist and must be carefully structured to handle tasks efficiently. In fact, browser vendors like Mozilla Firefox have expressed plans to retain certain Manifest V2 functionalities, providing an alternative for developers who find Manifest V3 too restrictive. Additionally, other Chromium-based browsers like Microsoft Edge and Brave can offer more flexibility for extensions, making them viable options for developers who need greater control. It\u2019s important to remember that these changes aren\u2019t all bad. Manifest V2 had several cited security risks and performance issues that Manifest V3 solves. Google is largely aiming to prevent malicious extensions and to also create a more privacy-conscious ecosystem. However, many developers feel these restrictions diminish the flexibility that made Chrome extensions so powerful.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">Setting Up Your First Chrome Extension<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now comes the fun part: building the extension from the ground up. Building a Chrome extension might seem daunting, but it\u2019s easier than you think. In this section, we\u2019ll walk through the fundamental steps required to create a basic extension, from organizing your files and adding functionality. By the end, you&#8217;ll have a working extension running in Chrome!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 1: Organizing Your Project Structure<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Before writing any code, it\u2019s important to properly structure your extension\u2019s files. A well-organized project makes it easier to manage and scale your extension over time. At a minimum, your Chrome extension should include the following files:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udcc1 <strong>my-extension\/<\/strong><strong><br><\/strong>\u251c\u2500\u2500 \ud83d\udcc4 manifest.json \u2192 Defines extension metadata and permissions.<br>\u251c\u2500\u2500 \ud83d\udcc4 background.js \u2192 Handles background tasks and events.<br>\u251c\u2500\u2500 \ud83d\udcc4 content.js \u2192 Interacts with web pages and modifies the DOM.<br>\u251c\u2500\u2500 \ud83d\udcc2 popup\/ \u2192 (Optional) Contains UI files if you\u2019re adding a popup interface.<br>\u2502 \u251c\u2500\u2500 \ud83d\udcc4 popup.html \u2192 The extension\u2019s interactive popup UI.<br>\u2502 \u251c\u2500\u2500 \ud83d\udcc4 popup.js \u2192 Handles popup actions and user interaction.<br>\u251c\u2500\u2500 \ud83d\udcc2 icons\/ \u2192 (Optional) Stores extension icons for different sizes.<br>\u251c\u2500\u2500 \ud83d\udcc4 styles.css \u2192 (Optional) Styles for popup or content scripts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This structure ensures that your manifest file, scripts, and assets are properly organized, making development and debugging much easier.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 2: Adding Functionality<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">We can set up the <strong>manifest file<\/strong> as referenced earlier in the article. Once your manifest file is set up, it\u2019s time to add functionality using background and content scripts. The background script manages tasks that need to persist, such as listening for user interactions or handling events. Here\u2019s a simple background.js script that logs when the extension is installed:<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>chrome.runtime.onInstalled.addListener(() => {\n\n\u00a0\u00a0console.log(\"Extension installed successfully!\");\n\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This script will run in the background and print a message to the console when the extension is first installed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we want to inject our <strong>content script<\/strong>. The content scripts will allow your extension to modify web pages and their DOM content. Here\u2019s an example contentScript.js file that changes the background color of a webpage when loaded:&nbsp;&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>document.body.style.backgroundColor = \"lightblue\";<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now when a user visits any webpage, this script will automatically inject and modify the page\u2019s appearance. This is the same technique used by mainstream extensions, albeit more rudimentary.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 3: Putting Everything Together<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Now that your files are set up, it\u2019s time to load the extension into Chrome and test it!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Chrome and navigate to <strong>chrome:\/\/extensions\/<\/strong>.\n<ul class=\"wp-block-list\">\n<li>This will lead you to your Chrome Extension Console. You can load development builds of your extension here<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Enable Developer Mode by toggling the switch in the top right corner.<\/li>\n\n\n\n<li>Click &#8220;Load Unpacked&#8221; and select the my-extension\/ folder.\n<ul class=\"wp-block-list\">\n<li>You only need to select the folder that contains your manifest.json file<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>The extension will now appear in your list! Click on the extension icon to test the popup (if added).\n<ul class=\"wp-block-list\">\n<li>You can also view any errors that may come up or even open a debug console by selecting the \u201cService Worker\u201d hyperlink on your extension<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXemrMhbNe_2NKblsJbtAdLybrreuuxryE-pjk_rzqIPhAyg4ujkNG0o9IK3qvaapEHGcOw1t5sa96pm5BYGM0D1dmi4p2Vqe0pjpII8WSFUZqPlrPJBMAkDWIC2MCc_L-eIPcooKg?key=OUV7MFWmROl281aNCuhFCpV0\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 4: Debugging<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Debugging your Chrome extension is an essential part of development. You can inspect errors and logs by opening <strong>Developer Tools (F12) <\/strong>and going to <strong>Console<\/strong>, where the content scripts will output messages. For background scripts, navigate to <strong>chrome:\/\/extensions\/<\/strong>, find your extension, and click <strong>&#8220;Service Worker.&#8221; <\/strong>This will open up its own isolated developer console where you can view logs, network requests, and check for issues. If the extension isn\u2019t behaving as expected, double-check your permissions in manifest.json, ensure scripts are correctly referenced, and use console.log to help track your execution flow. To see changes on your extension as you develop, reloading the extension after making changes ensures any changes you make in your code take effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that wasn\u2019t so bad was it? You\u2019ve just built and loaded your first Chrome extension. From here, you can expand its functionality by adding a popup UI, storage features, and API integrations. As you continue developing, consider optimizing performance, using event-driven background scripts, and implementing message passing between components. Whether you&#8217;re creating a productivity tool, security feature, or a simple browser enhancement, there are plenty of ways to refine and improve your extension. Taking the time to explore Chrome\u2019s extension APIs further will help you build more robust and useful applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Helpful Resources:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/mv3\/getstarted\/\" target=\"blank\">Google&#8217;s Official Chrome Extension Developer Guide<\/a><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/reference\/api\" target=\"blank\">Chrome Extensions API Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/mv3\/intro\/\" target=\"blank\">Manifest V3 Migration Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\" target=\"blank\">Debugging Chrome Extensions \u2013 Chrome DevTools Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/GoogleChrome\/chrome-extensions-samples\" target=\"blank\">Sample Chrome Extensions<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">At Solution Street, we&#8217;ve developed multiple Chrome plugins for our clients. If you&#8217;re looking for expert help in building one, feel free to <a href=\"https:\/\/solutionstreet.com\/contact-us.php\" target=\"blank\"><strong>reach out<\/strong><\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Web extensions have become an essential tool for enhancing browser functionality, offering users customized experiences ranging from ad-blocking and password management to productivity tools and automation scripts. Whether you&#8217;re looking to build a simple extension to streamline your workflow or a feature-rich tool for a broader audience, understanding the development process is key. In [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6535","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Understanding Modern Chrome Extensions: A Developer\u2019s Guide - Solution Street Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Modern Chrome Extensions: A Developer\u2019s Guide - Solution Street Blog\" \/>\n<meta property=\"og:description\" content=\"Introduction Web extensions have become an essential tool for enhancing browser functionality, offering users customized experiences ranging from ad-blocking and password management to productivity tools and automation scripts. Whether you&#8217;re looking to build a simple extension to streamline your workflow or a feature-rich tool for a broader audience, understanding the development process is key. In [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Solution Street Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-25T20:43:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-25T20:43:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png\" \/>\n\t<meta property=\"og:image:width\" content=\"765\" \/>\n\t<meta property=\"og:image:height\" content=\"297\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Peggy Frankel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Peggy Frankel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/\"},\"author\":{\"name\":\"Peggy Frankel\",\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/#\\\/schema\\\/person\\\/c4846451eff30e9514b534b2a2e01696\"},\"headline\":\"Understanding Modern Chrome Extensions: A Developer\u2019s Guide\",\"datePublished\":\"2025-02-25T20:43:45+00:00\",\"dateModified\":\"2025-02-25T20:43:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/\"},\"wordCount\":2672,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/extensiontitle.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/\",\"url\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/\",\"name\":\"Understanding Modern Chrome Extensions: A Developer\u2019s Guide - Solution Street Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/extensiontitle.png\",\"datePublished\":\"2025-02-25T20:43:45+00:00\",\"dateModified\":\"2025-02-25T20:43:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/#\\\/schema\\\/person\\\/c4846451eff30e9514b534b2a2e01696\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/extensiontitle.png\",\"contentUrl\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/extensiontitle.png\",\"width\":765,\"height\":297},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/2025\\\/02\\\/25\\\/understanding-modern-chrome-extensions-a-developers-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Modern Chrome Extensions: A Developer\u2019s Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/\",\"name\":\"Solution Street Blog\",\"description\":\"Quality Software Engineering - Technology and Consulting Articles\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/#\\\/schema\\\/person\\\/c4846451eff30e9514b534b2a2e01696\",\"name\":\"Peggy Frankel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/af71ceb16f89d32c9bb825a47f8057da9283b4a27a934bf0c47cdef65ad0eb5d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/af71ceb16f89d32c9bb825a47f8057da9283b4a27a934bf0c47cdef65ad0eb5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/af71ceb16f89d32c9bb825a47f8057da9283b4a27a934bf0c47cdef65ad0eb5d?s=96&d=mm&r=g\",\"caption\":\"Peggy Frankel\"},\"url\":\"https:\\\/\\\/www.solutionstreet.com\\\/blog\\\/author\\\/pfrankel\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding Modern Chrome Extensions: A Developer\u2019s Guide - Solution Street Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Modern Chrome Extensions: A Developer\u2019s Guide - Solution Street Blog","og_description":"Introduction Web extensions have become an essential tool for enhancing browser functionality, offering users customized experiences ranging from ad-blocking and password management to productivity tools and automation scripts. Whether you&#8217;re looking to build a simple extension to streamline your workflow or a feature-rich tool for a broader audience, understanding the development process is key. In [&hellip;]","og_url":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/","og_site_name":"Solution Street Blog","article_published_time":"2025-02-25T20:43:45+00:00","article_modified_time":"2025-02-25T20:43:59+00:00","og_image":[{"width":765,"height":297,"url":"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png","type":"image\/png"}],"author":"Peggy Frankel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Peggy Frankel","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#article","isPartOf":{"@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/"},"author":{"name":"Peggy Frankel","@id":"https:\/\/www.solutionstreet.com\/blog\/#\/schema\/person\/c4846451eff30e9514b534b2a2e01696"},"headline":"Understanding Modern Chrome Extensions: A Developer\u2019s Guide","datePublished":"2025-02-25T20:43:45+00:00","dateModified":"2025-02-25T20:43:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/"},"wordCount":2672,"commentCount":0,"image":{"@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/","url":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/","name":"Understanding Modern Chrome Extensions: A Developer\u2019s Guide - Solution Street Blog","isPartOf":{"@id":"https:\/\/www.solutionstreet.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png","datePublished":"2025-02-25T20:43:45+00:00","dateModified":"2025-02-25T20:43:59+00:00","author":{"@id":"https:\/\/www.solutionstreet.com\/blog\/#\/schema\/person\/c4846451eff30e9514b534b2a2e01696"},"breadcrumb":{"@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#primaryimage","url":"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png","contentUrl":"https:\/\/www.solutionstreet.com\/blog\/wp-content\/uploads\/2025\/02\/extensiontitle.png","width":765,"height":297},{"@type":"BreadcrumbList","@id":"https:\/\/www.solutionstreet.com\/blog\/2025\/02\/25\/understanding-modern-chrome-extensions-a-developers-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.solutionstreet.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Modern Chrome Extensions: A Developer\u2019s Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.solutionstreet.com\/blog\/#website","url":"https:\/\/www.solutionstreet.com\/blog\/","name":"Solution Street Blog","description":"Quality Software Engineering - Technology and Consulting Articles","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.solutionstreet.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.solutionstreet.com\/blog\/#\/schema\/person\/c4846451eff30e9514b534b2a2e01696","name":"Peggy Frankel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/af71ceb16f89d32c9bb825a47f8057da9283b4a27a934bf0c47cdef65ad0eb5d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/af71ceb16f89d32c9bb825a47f8057da9283b4a27a934bf0c47cdef65ad0eb5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/af71ceb16f89d32c9bb825a47f8057da9283b4a27a934bf0c47cdef65ad0eb5d?s=96&d=mm&r=g","caption":"Peggy Frankel"},"url":"https:\/\/www.solutionstreet.com\/blog\/author\/pfrankel\/"}]}},"_links":{"self":[{"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/posts\/6535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/comments?post=6535"}],"version-history":[{"count":33,"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/posts\/6535\/revisions"}],"predecessor-version":[{"id":6572,"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/posts\/6535\/revisions\/6572"}],"wp:attachment":[{"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/media?parent=6535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/categories?post=6535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.solutionstreet.com\/blog\/wp-json\/wp\/v2\/tags?post=6535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}