Chrome扩展技术咨询：页面刷新/打开自动显示名言，点击扩展停止显示

嘿，我来帮你拆解这个需求的实现方案，你需要同时修改manifest.json和新增/调整几个脚本文件，具体步骤如下：

要完成“页面刷新/打开自动显示名言，点击图标停止显示”的功能，核心是通过内容脚本注入页面实现自动展示，再通过扩展弹窗+后台通信实现停止逻辑，具体文件修改如下：

1. 先更新manifest.json #

原配置只支持弹窗触发，现在需要添加内容脚本、后台脚本的声明，以及必要权限：

{
  "manifest_version": 2,
  "name": "Mindfulness Quotes",
  "description": "Mindfulness quotes",
  "version": "11",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "storage"], // 新增storage用来保存开关状态
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配所有页面，也可指定特定域名
      "js": ["content.js"],
      "run_at": "document_end" // 页面加载完成后注入脚本
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

2. 新增content.js（内容脚本） #

这个脚本负责在页面加载时自动插入名言，同时监听停止指令：

// 初始化时检查是否开启自动显示（默认开启）
chrome.storage.local.get('isEnabled', (result) => {
  const isEnabled = result.isEnabled !== false;
  if (isEnabled) showMindfulnessQuote();
});

// 监听来自弹窗的停止指令
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'stopDisplay') {
    // 移除页面上的名言元素
    const quoteElement = document.getElementById('mindfulness-quote');
    if (quoteElement) quoteElement.remove();
    // 保存关闭状态，避免下次页面加载再显示
    chrome.storage.local.set({isEnabled: false});
  }
});

// 生成并展示名言的核心函数
function showMindfulnessQuote() {
  // 替换成你的名言列表
  const quotes = [
    "Mindfulness is the aware, balanced acceptance of the present experience.",
    "When you realize nothing is lacking, the whole world belongs to you.",
    "The present moment is the only time over which we have dominion."
  ];
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

  // 创建悬浮的名言容器
  const quoteDiv = document.createElement('div');
  quoteDiv.id = 'mindfulness-quote';
  quoteDiv.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 99999;
    max-width: 300px;
    font-family: sans-serif;
  `;
  quoteDiv.textContent = randomQuote;
  document.body.appendChild(quoteDiv);
}

3. 新增background.js（后台脚本） #

用来统一处理弹窗和内容脚本的通信：

// 监听弹窗发送的指令，转发给当前激活的标签页
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'toggleDisplay') {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {action: 'stopDisplay'});
    });
  }
});

4. 修改popup.html和popup.js #

让点击扩展图标后的弹窗能触发停止逻辑：
popup.html示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 200px; padding: 15px; text-align: center; }
    button { padding: 8px 12px; cursor: pointer; border: none; border-radius: 4px; background: #4CAF50; color: white; }
  </style>
</head>
<body>
  <p>点击按钮停止显示名言</p>
  <button id="stopBtn">停止显示</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js示例：

document.getElementById('stopBtn').addEventListener('click', () => {
  // 发送停止指令给后台
  chrome.runtime.sendMessage({action: 'toggleDisplay'}, () => {
    // 发送后自动关闭弹窗
    window.close();
  });
});

关键说明 #

• 为什么要改manifest.json？因为需要新增内容脚本、后台脚本的加载声明，以及storage权限来记住用户的关闭状态，避免页面刷新后又自动显示。
• 核心逻辑：页面加载完成后，内容脚本自动检查状态并展示名言；点击扩展图标打开弹窗，触发按钮后发送指令给内容脚本，移除名言并保存关闭状态。

内容的提问来源于stack exchange，提问作者H.T.