编写Chrome插件，点击插件读取分类并显示，选择分类后如果收藏文件夹没有对应分类的文件夹名字，则创建文件夹，收藏当前标签页。提供option页面编辑分类

llrraa2010

于 2024-08-17 21:25:56 发布

阅读量189

点赞数 3

分类专栏： chrome 文章标签： chrome 前端

本文链接：https://blog.csdn.net/llrraa2010/article/details/141287079

版权

chrome 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

创建一个Chrome插件，允许用户通过插件来管理书签，涉及到以下步骤：

创建manifest.json文件：定义插件的基本信息和权限。
编写后台脚本background.js：处理插件的逻辑，如监听浏览器动作和操作浏览器API。
创建选项页面options.html和options.js：用户可以在这里编辑分类。
创建弹出页面popup.html和popup.js：用户点击插件图标时显示的界面，用于选择分类并收藏当前页面。
样式文件（如popup.css和options.css）：用于美化用户界面。

下面是这些组件的示例代码：

1. Manifest文件 (`manifest.json`)

{
  "manifest_version": 3,
  "name": "Bookmark Organizer",
  "version": "1.0",
  "permissions": ["bookmarks", "activeTab", "storage", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "options_page": "options.html",
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. 背景脚本 (`background.js`)

// 此脚本可以留空，因为所有逻辑都在popup.js和options.js中处理

3. 选项页面 (`options.html`)

<!DOCTYPE html>
<html>
<head>
  <title>Edit Categories Enter categories separated by commas</title>
   <style>
    /* 全局样式，适用于整个页面 */
    body {
      font-family: Arial, sans-serif; /* 设置页面字体 */
    }

    /* 特定于textarea的样式 */
    textarea {
      width: 300px; /* 宽度，根据需要调整 */
      height: 150px; /* 高度，根据需要调整 */
      font-size: 22px; /* 字体大小 */
    }

    /* 容器样式，用于添加一些边距 */
    .options-container {
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc; /* 边框 */
    }
  </style>
  <link rel="stylesheet" type="text/css" href="options.css">
</head>
<body>
  <h1>Edit Categories Enter categories separated by commas</h1>
  <textarea id="categories" placeholder="Enter categories separated by commas"></textarea>
  <button id="save">Save</button>
  <script src="options.js"></script>
</body>
</html>

4. 选项页面脚本 (`options.js`)

// 定义默认分类
const defaultCategories = ['LLM', 'LLM app', 'LLM EDU', 'distributed LLM', 'local LLM', 'Consumption as Investment Model'];

document.addEventListener('DOMContentLoaded', () => {
  // 获取保存的分类，如果没有，则使用默认分类
  chrome.storage.sync.get('categories', (data) => {
    const categories = data.categories || defaultCategories;
    document.getElementById('categories').value = categories.join(', ');
  });

  document.getElementById('save').addEventListener('click', () => {
    const categoriesInput = document.getElementById('categories');
    const categories = categoriesInput.value.split(',').map(category => category.trim());
    chrome.storage.sync.set({ categories }, () => {
      alert('分类保存成功');
    });
  });
});

5. 弹出页面 (`popup.html`)

<!DOCTYPE html>
<html>
<head>
  <title>Bookmark Page</title>
  <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
  <h1>Bookmark Page</h1>
  <select id="category-select"></select>
  <button id="bookmark">Bookmark</button>
  <script src="popup.js"></script>
</body>
</html>

6. 弹出页面脚本 (`popup.js`)

document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.sync.get(['categories'], (data) => {
    const categories = data.categories ||  ['LLM', 'LLM app', 'LLM EDU', 'distributed LLM', 'local LLM', 'Consumption as Investment Model'];
    const select = document.getElementById('category-select');
    categories.forEach((category) => {
      const option = document.createElement('option');
      option.textContent = category;
      select.appendChild(option);
    });

    document.getElementById('bookmark').addEventListener('click', () => {
      const category = select.value;
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const tab = tabs[0];
        const url = tab.url;
        const title = tab.title;

        chrome.bookmarks.search({ title: category }, (results) => {
          const folderId = results.length > 0 ? results[0].id : null;
          if (!folderId) {
            chrome.bookmarks.create({ title: category }, (newFolder) => {
              chrome.bookmarks.update(newFolder.id, { title: category }, () => {
                chrome.bookmarks.create({ title: title, url: url, parentId: newFolder.id }, (newBookmark) => {
                  console.log(`Bookmarked '${title}' to '${category}' folder`);
                });
              });
            });
          } else {
            chrome.bookmarks.create({ title: title, url: url, parentId: folderId }, (newBookmark) => {
              console.log(`Bookmarked '${title}' to '${category}' folder`);
            });
          }
        });
      });
    });
  });
});

7. 样式文件 (`popup.css` 和 `options.css`)

你可以使用CSS来美化弹出页面和选项页面。

请注意，这只是一个基础示例，实际开发中可能需要更多的错误处理和功能扩展。此外，Chrome插件开发需要遵循Chrome Web Store的政策和要求。

llrraa2010

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
编写Chrome插件，点击插件读取分类并显示，选择分类后如果收藏文件夹没有对应分类的文件夹名字，则创建文件夹，收藏当前标签页。提供option页面编辑分类

创建一个Chrome插件，允许用户通过插件来管理书签，涉及到以下步骤：下面是这些组件的示例代码：2. 背景脚本 ()3. 选项页面 ()4. 选项页面脚本 ()5. 弹出页面 ()6. 弹出页面脚本 ()7. 样式文件 ( 和 )你可以使用CSS来美化弹出页面和选项页面。请注意，这只是一个基础示例，实际开发中可能需要更多的错误处理和功能扩展。此外，Chrome插件开发需要遵循Chrome Web Store的政策和要求。
复制链接

扫一扫