Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

See the Browser Extension Development in Action column for this series of articles

TagDown is an open source bookmark management plug-in that allows you to view, add, and modify bookmarks using the extension. It also allows you to export bookmarks in different ways.

In addition to the usual bookmark management features, it also has the following features:

  • Support 🎬newBookmark and attach additional information, for exampletags,groups 等
  • Support 🎬exportAny bookmark isjsonThe document
  • Browse the hierarchical bookmark data as a 🎬 tree
  • Open multiple bookmarks in one click. You can open bookmarks in 🎬 TAB group

Icon Dynamic change

Behind the extension is a service worker that executes commands based on a monitor event-response model.

You can monitor TAB page switching events in the background, check whether the current active TAB page URL matches any saved bookmarks, and dynamically change the Action icon. Implement a function similar to the star icon on the right side of Chrome’s address bar to toggle status to indicate whether the current TAB is favorites.

⚠️ If you want to import other libraries into a background script, declare the background script type as a module in the manifest.json configuration manifest

{
  // ...
  "background": {
    "service_worker": "./background/main.js"."type": "module"
  },
  // ...
}
Copy the code

This function is implemented using two APIs provided by Chrome:

  • chrome.action.setIconDynamically set the Action icon
  • chrome.tabs.onActivatedListen for tag activation events
// src/backrground/main.js // ... /** * Based on whether the current active tag is favorites, */ const changeActionIcon = async (tag = false) => {if (tag) {await chrome.action.seticon ({path: { 16: '/icons/icon16_tag.png', }, }); } else { await chrome.action.setIcon({ path: { 16: '/icons/icon16_untag.png', }, }); }}; // Listen for the tag activation event, the callback function receives an object entry, It contains to activate the tag tabId chrome. Tabs. OnActivated. AddListener (async (activeInfo) = > {/ / tags based on the activation of tabId label object, Const TAB = await chrome.tabs. Get (activeInfo.tabID); const url = tab.url || tab.pendingUrl; Const Nodes = await chrome.bookmarks.search({url,}); let bookmarkState = false; If (nodes.length === 0) {bookmarkState = false; } else {// Find at least one bookmark that matches bookmarkState = true; } // changeActionIcon await changeActionIcon(bookmarkState) based on bookmark matching; });Copy the code

💡 can also dynamically change the Action icon based on monitoring other events:

  • chrome.windows.onFocusChangedBrowser window change event
  • chrome.tabs.onUpdatedTag update events, such as when the URL of a TAB page changes
  • chrome.bookmarks.onCreatedNew Bookmark event

Export data

In the Settings page, you can export and import IndexedDB databases, and export bookmarks on demand.

In the TagDown configuration page, Vanilla JS implements a similar function:

// src/options/App.vue const exportJsonFile = (blob, fileName) => { if (! blob) return; const a = document.createElement('a'); const url = window.URL.createObjectURL(blob); a.href = url; a.download = `${fileName}.json`; a.click(); }; Const jsonData = json.stringify (data, null, 2); // Const jsonData = json.stringify (data, null, 2); Const Blob = new Blob([jsonFile], {type: 'application/ JSON '}); ExportJsonFile (blob, 'data export ')Copy the code

Remove scroll bar

Since Chrome limits the pop-up page size, the minimum height and width is 25px, the maximum height is 600px, and the maximum width is 800px. So to maximize the amount of space available to display content, TagDown sets the browsing state of the pop-up page to the maximum limit

<style lang="scss" scoped>
// src/popup/App.vue
.browser-mode {
  width: 800px;
  height: 600px;
}
    
// ...
</style>
Copy the code

You can style the element in the popup page entry file 📄 SRC /popup.html and unscroll the element

<! DOCTYPEhtml>
<html lang="en">

<head>
  <! -- Omit some code -->
  <style>
    body::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
  </style>
</head>  
    
<! -- Omit some code -->
</html>
Copy the code