You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

1 lines
80 KiB

<!doctypehtml><html lang=zh-CN><meta charset=UTF-8><meta content=width=device-width name=viewport><meta media="(prefers-color-scheme: light)" content=#222 name=theme-color><meta media="(prefers-color-scheme: dark)" content=#222 name=theme-color><meta content="Hexo 7.3.0" name=generator><link href=https://cdnjs.cloudflare.com rel=preconnect><link href=/images/apple-touch-icon-next.png rel=apple-touch-icon sizes=180x180><link href=/images/favicon-32x32-next.png rel=icon sizes=32x32 type=image/png><link href=/images/favicon-16x16-next.png rel=icon sizes=16x16 type=image/png><link color=#222 href=/images/logo.svg rel=mask-icon><meta content=2X6S9P7CAjXjVvw8YyQR8pCu-B0oEu7O9quLgxXuWyA name=google-site-verification><meta content=dV8JGNzi0c name=baidu-site-verification><script>!function(){var t=!1;function e(){var e;t||(t=!0,(e=document.createElement("script")).setAttribute("data-ad-client","ca-pub-7480618470784058"),e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",document.head.appendChild(e))}function a(){"requestIdleCallback"in window?window.requestIdleCallback(e,{timeout:5e3}):window.setTimeout(e,5e3)}"complete"===document.readyState?a():window.addEventListener("load",a,{once:!0})}()</script><link href=/css/main.css rel=stylesheet><link crossorigin=anonymous href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css integrity=sha256-VHqXKFhhMxcpubYf9xiWdCiojEbY9NexQ4jh8AxbvcM= rel=stylesheet><link crossorigin=anonymous href=https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/6.1.14/fancybox/fancybox.css integrity=sha256-mdaMxrItEW6hMIVJJNPKuX0B7KCSJQVEv3mVY4N2we4= rel=stylesheet><script class=next-config data-name=main type=application/json>{"hostname":"nicksxs.me","root":"/","images":"/images","scheme":"Pisces","darkmode":true,"version":"8.29.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":true,"style":"default"},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":true,"nav":null},"stickytabs":false,"motion":{"enable":false,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果:${query}","hits_time":"找到 ${hits} 个搜索结果(用时 ${time} 毫秒)","hits":"找到 ${hits} 个搜索结果"},"algolia":{"appID":"663Q99OQQD","apiKey":"e461a1371d12cec1491c1153b288a9ed","indexName":"nicksxs","hits":{"per_page":10}}}</script><script defer src=/js/config.js></script><meta content="最近因为看了下 Chrome 里面置入的小模型,顺手又看了下 Chrome 扩展。之前其实也接触过一些浏览器扩展,但是一直没有特别系统地看过它的结构,感觉好像就是写一个 html,然后再配几个 js 文件就可以了。" name=description><meta content=article property=og:type><meta content=学一下chrome的扩展开发 property=og:title><meta content=https://nicksxs.me/2026/07/12/%E5%AD%A6%E4%B8%80%E4%B8%8Bchrome%E7%9A%84%E6%89%A9%E5%B1%95%E5%BC%80%E5%8F%91/index.html property=og:url><meta content="Nicksxs's Blog" property=og:site_name><meta content="最近因为看了下 Chrome 里面置入的小模型,顺手又看了下 Chrome 扩展。之前其实也接触过一些浏览器扩展,但是一直没有特别系统地看过它的结构,感觉好像就是写一个 html,然后再配几个 js 文件就可以了。" property=og:description><meta content=zh_CN property=og:locale><meta content=2026-07-12T14:18:19.000Z property=article:published_time><meta content=2026-07-12T14:18:19.000Z property=article:modified_time><meta content=Nicksxs property=article:author><meta content=Chrome property=article:tag><meta content="Chrome Extension" property=article:tag><meta content=JavaScript property=article:tag><meta content=summary name=twitter:card><link href=https://nicksxs.me/2026/07/12/%E5%AD%A6%E4%B8%80%E4%B8%8Bchrome%E7%9A%84%E6%89%A9%E5%B1%95%E5%BC%80%E5%8F%91/ rel=canonical><script class=next-config data-name=page type=application/json>{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://nicksxs.me/2026/07/12/%E5%AD%A6%E4%B8%80%E4%B8%8Bchrome%E7%9A%84%E6%89%A9%E5%B1%95%E5%BC%80%E5%8F%91/","path":"2026/07/12/学一下chrome的扩展开发/","title":"学一下chrome的扩展开发"}</script><script class=next-config data-name=calendar type=application/json>""</script><title>学一下chrome的扩展开发 | Nicksxs's Blog</title><script async src=https://www.googletagmanager.com/gtag/js?id=UA-61358619-1></script><script class=next-config data-name=google_analytics type=application/json>{"tracking_id":"UA-61358619-1","only_pageview":false,"measure_protocol_api_secret":null}</script><script defer src=/js/third-party/analytics/google-analytics.js></script><script defer src=/js/third-party/analytics/baidu-analytics.js></script><script async src=https://hm.baidu.com/hm.js?20f33b3c0c0eff9b1522999c0015646d></script><script crossorigin=anonymous defer integrity=sha256-QnJV4HT5r8i89ovZGRD86iynZqHerEbT2xt69vDM36I= src=https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/6.1.14/fancybox/fancybox.umd.js></script><script defer src=/js/utils.js></script><script defer src=/js/sidebar.js></script><script defer src=/js/next-boot.js></script><script data-algolia-integrity=sha256-o49zoHLDPBm9WLg6AiliAVi3axCRTqe3ltTxLvhzAVg= data-algolia-src=https://cdnjs.cloudflare.com/ajax/libs/algoliasearch/5.36.0/lite/builds/browser.umd.js data-search-src=/js/third-party/search/algolia-search.js src=/js/third-party/search/algolia-search-loader.js></script><script defer src=/js/third-party/fancybox.js></script><noscript><link href=/css/noscript.css rel=stylesheet></noscript><link title="Nicksxs's Blog" href=/atom.xml rel=alternate type=application/atom+xml><body itemscope itemtype=http://schema.org/WebPage><div class=headband></div><main class=main><div class=column><header class=header itemscope itemtype=http://schema.org/WPHeader><div class=site-brand-container><div class=site-nav-toggle><div aria-label=切换导航栏 class=toggle role=button><span class=toggle-line></span><span class=toggle-line></span><span class=toggle-line></span></div></div><div class=site-meta><a class=brand href=/ rel=start><i class=logo-line></i><p class=site-title>Nicksxs's Blog</p><i class=logo-line></i></a><p class=site-subtitle itemprop=description>Java 运行时、生产诊断与 AI 工程实践</div><div class=site-nav-right><div class="toggle popup-trigger" aria-label=搜索 role=button><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class=site-nav><ul class="main-menu menu"><li class="menu-item menu-item-home"><a href=/ rel=section><i class="fa fa-home fa-fw"></i>首页</a><li class="menu-item menu-item-专题"><a href=/topics/ rel=section><i class="fa fa-layer-group fa-fw"></i>专题</a><li class="menu-item menu-item-工具"><a href=/tools/ rel=section><i class="fa fa-toolbox fa-fw"></i>工具</a><li class="menu-item menu-item-about"><a href=/about/ rel=section><i class="fa fa-user fa-fw"></i>关于我</a><li class="menu-item menu-item-tags"><a href=/tags/ rel=section><i class="fa fa-tags fa-fw"></i>标签</a><li class="menu-item menu-item-categories"><a href=/categories/ rel=section><i class="fa fa-th fa-fw"></i>分类</a><li class="menu-item menu-item-archives"><a href=/archives/ rel=section><i class="fa fa-archive fa-fw"></i>归档</a><li class="menu-item menu-item-search"><a class=popup-trigger role=button><i class="fa fa-search fa-fw"></i>搜索</a></ul></nav><div class=search-pop-overlay><div class="popup search-popup"><div class=search-header><span class=search-icon><i class="fa fa-search"></i></span><div class=search-input-container><input autocapitalize=off autocomplete=off class=search-input maxlength=80 placeholder=搜索... spellcheck=false type=search></div><span class=popup-btn-close role=button><i class="fa fa-times-circle"></i></span></div><div class=search-result-container><div class=search-result-icon><i class="fab fa-algolia fa-5x"></i></div></div></div></div></header><aside class=sidebar><div class="sidebar-inner sidebar-nav-active sidebar-toc-active"><ul class=sidebar-nav><li class=sidebar-nav-toc>文章目录<li class=sidebar-nav-overview>站点概览</ul><div class=sidebar-panel-container><div class="post-toc-wrap sidebar-panel"><div class="post-toc animated"><ol class=nav><li class="nav-item nav-level-3"><a class=nav-link href=#%E5%85%88%E7%9C%8B%E4%B8%8B%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84><span class=nav-number>1.</span> <span class=nav-text>先看下目录结构</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#manifest-json><span class=nav-number>2.</span> <span class=nav-text>manifest.json</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#popup-html><span class=nav-number>3.</span> <span class=nav-text>popup.html</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#popup-js><span class=nav-number>4.</span> <span class=nav-text>popup.js</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#content-js><span class=nav-number>5.</span> <span class=nav-text>content.js</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#popup-%E5%92%8C-content-script-%E7%9A%84%E5%8C%BA%E5%88%AB><span class=nav-number>6.</span> <span class=nav-text>popup 和 content script 的区别</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#%E5%8A%A0%E8%BD%BD%E6%89%A9%E5%B1%95><span class=nav-number>7.</span> <span class=nav-text>加载扩展</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%9C%89%E4%BA%9B%E9%A1%B5%E9%9D%A2%E4%B8%8D%E8%83%BD%E4%BD%BF%E7%94%A8><span class=nav-number>8.</span> <span class=nav-text>为什么有些页面不能使用</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#%E5%A6%82%E6%9E%9C%E6%98%AF%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C><span class=nav-number>9.</span> <span class=nav-text>如果是异步操作</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#activeTab-%E5%92%8C-content-scripts><span class=nav-number>10.</span> <span class=nav-text>activeTab 和 content_scripts</span></a><li class="nav-item nav-level-3"><a class=nav-link href=#%E6%9C%80%E5%90%8E><span class=nav-number>11.</span> <span class=nav-text>最后</span></a></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author animated" itemprop=author itemscope itemtype=http://schema.org/Person><img alt=Nicksxs class=site-author-image itemprop=image src=/uploads/avatar.jpg><p class=site-author-name itemprop=name>Nicksxs<div class=site-description itemprop=description>Nicksxs 的技术博客,深入 Java 运行时与生产诊断、低成本大模型推理和 Agent 工程实践。</div></div><div class="site-state-wrap animated"><nav class=site-state><div class="site-state-item site-state-posts"><a href=/archives/><span class=site-state-item-count>394</span> <span class=site-state-item-name>日志</span></a></div><div class="site-state-item site-state-categories"><a href=/categories/><span class=site-state-item-count>181</span> <span class=site-state-item-name>分类</span></a></div><div class="site-state-item site-state-tags"><a href=/tags/><span class=site-state-item-count>347</span> <span class=site-state-item-name>标签</span></a></div></nav></div><div class="links-of-author animated"><span class=links-of-author-item><a rel="noopener me" title="GitHub → https://github.com/nicksxs" href=https://github.com/nicksxs target=_blank><i class="fab fa-github fa-fw"></i>GitHub</a> </span><span class=links-of-author-item><a rel="noopener me" title="E-Mail → mailto:nicksxs1202@gmail.com" href=mailto:nicksxs1202@gmail.com target=_blank><i class="fa fa-envelope fa-fw"></i>E-Mail</a></span></div><div class="cc-license animated" itemprop=license><a class=cc-opacity href=https://creativecommons.org/licenses/by-nc-sa/4.0/ rel=noopener target=_blank><img alt="Creative Commons" src=https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg></a></div><div class="widget-wrap sidebar-tag-cloud"><div class=tag-cloud-tags><a class=tag-cloud-10 href=/tags/Java/ style=font-size:16px>Java</a><a class=tag-cloud-9 href=/tags/leetcode/ style=font-size:15.62px>leetcode</a><a class=tag-cloud-8 href=/tags/LLM/ style=font-size:15.23px>LLM</a><a class=tag-cloud-8 href=/tags/%E7%94%9F%E6%B4%BB/ style=font-size:14.85px>生活</a><a class=tag-cloud-7 href=/tags/%E9%A2%98%E8%A7%A3/ style=font-size:14.46px>题解</a><a class=tag-cloud-6 href=/tags/SpringBoot/ style=font-size:14.08px>SpringBoot</a><a class=tag-cloud-6 href=/tags/MySQL/ style=font-size:14.08px>MySQL</a><a class=tag-cloud-5 href=/tags/C/ style=font-size:13.69px>C++</a><a class=tag-cloud-5 href=/tags/Redis/ style=font-size:13.31px>Redis</a><a class=tag-cloud-4 href=/tags/Tomcat/ style=font-size:12.92px>Tomcat</a><a class=tag-cloud-4 href=/tags/Mybatis/ style=font-size:12.92px>Mybatis</a><a class=tag-cloud-3 href=/tags/%E5%B0%8F%E6%8A%80%E5%B7%A7/ style=font-size:12.54px>小技巧</a><a class=tag-cloud-2 href=/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/ style=font-size:12.15px>数据结构</a><a class=tag-cloud-2 href=/tags/%E6%BA%90%E7%A0%81/ style=font-size:12.15px>源码</a><a class=tag-cloud-2 href=/tags/MQ/ style=font-size:11.77px>MQ</a><a class=tag-cloud-2 href=/tags/%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97/ style=font-size:11.77px>消息队列</a><a class=tag-cloud-2 href=/tags/RocketMQ/ style=font-size:11.77px>RocketMQ</a><a class=tag-cloud-2 href=/tags/%E8%BF%90%E5%8A%A8/ style=font-size:11.77px>运动</a><a class=tag-cloud-1 href=/tags/php/ style=font-size:11.38px>php</a><a class=tag-cloud-0 href=/tags/Spring/ style=font-size:11px>Spring</a><a class=tag-cloud-0 href=/tags/linux/ style=font-size:11px>linux</a><a class=tag-cloud-0 href=/tags/Docker/ style=font-size:11px>Docker</a><a class=tag-cloud-0 href=/tags/%E5%87%8F%E8%82%A5/ style=font-size:11px>减肥</a><a class=tag-cloud-0 href=/tags/%E8%B7%91%E6%AD%A5/ style=font-size:11px>跑步</a></div></div><div class="affiliate-creative affiliate-creative--sidebar" data-affiliate-id=tencent-cloud-general><a rel="sponsored noopener" aria-label=腾讯云产品优惠 href=https://cloud.tencent.com/act/cps/redirect?redirect=2446&cps_key=2e33a1eedb380997d03618b4a5ba6ca7&from=console target=_blank><img alt=腾讯云服务器、数据库和云产品优惠 decoding=async height=419 loading=lazy src=/uploads/affiliate/tencent-cloud-general.webp width=690> </a><span class=affiliate-disclosure>推广</span></div></div></div></div><div class="sidebar-inner sidebar-blogroll"><div class="links-of-blogroll animated"><div class=links-of-blogroll-title><i class="fa fa-globe fa-fw"></i> 链接</div><ul class=links-of-blogroll-list><li class=links-of-blogroll-item><a href=https://covermusic.cn/ rel=noopener target=_blank title=https://covermusic.cn>69伙伴</a></ul></div></div></aside></div><div class="main-inner post posts-expand"><div class=post-block><article class=post-content itemscope itemtype=http://schema.org/Article lang=zh-CN><link href=https://nicksxs.me/2026/07/12/%E5%AD%A6%E4%B8%80%E4%B8%8Bchrome%E7%9A%84%E6%89%A9%E5%B1%95%E5%BC%80%E5%8F%91/ itemprop=mainEntityOfPage><span hidden itemprop=author itemscope itemtype=http://schema.org/Person><meta content=/uploads/avatar.jpg itemprop=image><meta content=Nicksxs itemprop=name></span><span hidden itemprop=publisher itemscope itemtype=http://schema.org/Organization><meta content="Nicksxs's Blog" itemprop=name><meta content="Nicksxs 的技术博客,深入 Java 运行时与生产诊断、低成本大模型推理和 Agent 工程实践。" itemprop=description></span><span hidden itemprop=post itemscope itemtype=http://schema.org/CreativeWork><meta content="学一下chrome的扩展开发 | Nicksxs's Blog" itemprop=name><meta content="最近因为看了下 Chrome 里面置入的小模型,顺手又看了下 Chrome 扩展。之前其实也接触过一些浏览器扩展,但是一直没有特别系统地看过它的结构,感觉好像就是写一个 html,然后再配几个 js 文件就可以了。" itemprop=description></span><header class=post-header><h1 itemprop="name headline" class=post-title>学一下chrome的扩展开发</h1><div class=post-meta-container><div class=post-meta><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-calendar"></i> </span><span class=post-meta-item-text>发表于</span> <time itemprop="dateCreated datePublished" title="创建时间:2026-07-12 22:18:19" datetime=2026-07-12T22:18:19+08:00>2026-07-12</time> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-folder"></i> </span><span class=post-meta-item-text>分类于</span> <span itemprop=about itemscope itemtype=http://schema.org/Thing><a href=/categories/%E5%89%8D%E7%AB%AF/ itemprop=url rel=index><span itemprop=name>前端</span></a> </span></span><span class="post-meta-item cloudflare-page-counter" data-increment=true data-path=/2026/07/12/%E5%AD%A6%E4%B8%80%E4%B8%8Bchrome%E7%9A%84%E6%89%A9%E5%B1%95%E5%BC%80%E5%8F%91/ data-title=学一下chrome的扩展开发 title=阅读次数><span class=post-meta-item-icon><i class="far fa-eye"></i> </span><span class=post-meta-item-text>阅读次数:</span> <span class=cloudflare-page-counter-count></span></span></div><div class=post-description>最近因为看了下 Chrome 里面置入的小模型,顺手又看了下 Chrome 扩展。之前其实也接触过一些浏览器扩展,但是一直没有特别系统地看过它的结构,感觉好像就是写一个 html,然后再配几个 js 文件就可以了。</div></div></header><div class=post-body itemprop=articleBody><p>最近因为看了下 Chrome 里面置入的小模型,顺手又看了下 Chrome 扩展。<p>之前其实也接触过一些浏览器扩展,但是一直没有特别系统地看过它的结构,感觉好像就是写一个 <code>html</code>,然后再配几个 <code>js</code> 文件就可以了。<p>但是真正写起来以后,会发现 Chrome 扩展里面有几个不同的运行环境,尤其是 <code>popup</code> 和 <code>content script</code>,如果没有分清楚,后面调用网页内容或者操作页面 DOM 的时候就容易有点混乱。<p>这次先做一个比较简单的例子,点击扩展按钮以后,给当前页面加一个背景色,再在右下角显示一个提示。</p><span id=more></span><h3 id=先看下目录结构><a class=headerlink href=#先看下目录结构 title=先看下目录结构></a>先看下目录结构</h3><p>代码放在这里:<p><code>source/code/chrome-extension-demo</code><p>目录结构如下:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br></pre><td class=code><pre><span class=line>chrome-extension-demo/</span><br><span class=line>├── manifest.json</span><br><span class=line>├── popup.html</span><br><span class=line>├── popup.css</span><br><span class=line>├── popup.js</span><br><span class=line>└── content.js</span><br></pre></table></figure><p>这几个文件的作用比较简单:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br></pre><td class=code><pre><span class=line>manifest.json 扩展的配置文件</span><br><span class=line>popup.html 点击扩展图标后显示的弹窗</span><br><span class=line>popup.js 处理弹窗中的按钮点击</span><br><span class=line>popup.css 弹窗样式</span><br><span class=line>content.js 运行在网页中,操作网页 DOM</span><br></pre></table></figure><p>首先看下 <code>manifest.json</code>。<h3 id=manifest-json><a class=headerlink href=#manifest-json title=manifest.json></a>manifest.json</h3><figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br></pre><td class=code><pre><span class=line><span class=punctuation>{</span></span><br><span class=line> <span class=attr>"manifest_version"</span><span class=punctuation>:</span> <span class=number>3</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"name"</span><span class=punctuation>:</span> <span class=string>"Simple Page Marker"</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"version"</span><span class=punctuation>:</span> <span class=string>"1.0.0"</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"description"</span><span class=punctuation>:</span> <span class=string>"A tiny Chrome extension demo for marking the current page."</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"action"</span><span class=punctuation>:</span> <span class=punctuation>{</span></span><br><span class=line> <span class=attr>"default_popup"</span><span class=punctuation>:</span> <span class=string>"popup.html"</span></span><br><span class=line> <span class=punctuation>}</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"permissions"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"activeTab"</span></span><br><span class=line> <span class=punctuation>]</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"content_scripts"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=punctuation>{</span></span><br><span class=line> <span class=attr>"matches"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"&LTall_urls>"</span></span><br><span class=line> <span class=punctuation>]</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"js"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"content.js"</span></span><br><span class=line> <span class=punctuation>]</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"run_at"</span><span class=punctuation>:</span> <span class=string>"document_idle"</span></span><br><span class=line> <span class=punctuation>}</span></span><br><span class=line> <span class=punctuation>]</span></span><br><span class=line><span class=punctuation>}</span></span><br></pre></table></figure><p>这个文件相当于 Chrome 扩展的入口配置。<p><code>manifest_version</code> 就是使用的配置版本,现在一般使用 <code>3</code>。<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line><span class=attr>"action"</span><span class=punctuation>:</span> <span class=punctuation>{</span></span><br><span class=line> <span class=attr>"default_popup"</span><span class=punctuation>:</span> <span class=string>"popup.html"</span></span><br><span class=line><span class=punctuation>}</span></span><br></pre></table></figure><p>这个配置表示点击浏览器右上角的扩展图标以后,打开 <code>popup.html</code>。<p>下面这个是权限:<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line><span class=attr>"permissions"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"activeTab"</span></span><br><span class=line><span class=punctuation>]</span></span><br></pre></table></figure><p><code>activeTab</code> 表示用户主动点击扩展以后,扩展可以临时访问当前的标签页。<p>这里的“临时”还是比较重要的,它并不是给扩展永久访问所有网站的权限,而是在用户操作扩展以后,允许它访问当前页面。<p>然后下面是 <code>content_scripts</code>:<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br></pre><td class=code><pre><span class=line><span class=attr>"content_scripts"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=punctuation>{</span></span><br><span class=line> <span class=attr>"matches"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"&LTall_urls>"</span></span><br><span class=line> <span class=punctuation>]</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"js"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"content.js"</span></span><br><span class=line> <span class=punctuation>]</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"run_at"</span><span class=punctuation>:</span> <span class=string>"document_idle"</span></span><br><span class=line> <span class=punctuation>}</span></span><br><span class=line><span class=punctuation>]</span></span><br></pre></table></figure><p>这里配置了需要注入的脚本和匹配的网页。<p><code>&LTall_urls></code> 表示所有普通网页都可以匹配,<code>content.js</code> 会被注入进去。<p><code>run_at</code> 表示什么时候注入脚本,这里使用的是 <code>document_idle</code>,也就是页面基本加载完成以后再执行。<p>官方文档中也比较推荐使用这个时机,因为一般扩展不需要在页面最开始加载的时候就执行。<p>不过 <code>&LTall_urls></code> 的权限比较大,如果是真正发布的扩展,最好改成具体的网站范围,例如:<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line><span class=attr>"matches"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"https://example.com/*"</span></span><br><span class=line><span class=punctuation>]</span></span><br></pre></table></figure><h3 id=popup-html><a class=headerlink href=#popup-html title=popup.html></a>popup.html</h3><p>接着看下弹窗页面。<figure class="highlight html"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br></pre><td class=code><pre><span class=line><span class=meta>&LT!doctype <span class=keyword>html</span>></span></span><br><span class=line><span class=tag><<span class=name>html</span> <span class=attr>lang</span>=<span class=string>"zh-CN"</span>></span></span><br><span class=line> <span class=tag><<span class=name>head</span>></span></span><br><span class=line> <span class=tag><<span class=name>meta</span> <span class=attr>charset</span>=<span class=string>"UTF-8"</span> /></span></span><br><span class=line> <span class=tag><<span class=name>meta</span> <span class=attr>name</span>=<span class=string>"viewport"</span> <span class=attr>content</span>=<span class=string>"width=device-width, initial-scale=1.0"</span> /></span></span><br><span class=line> <span class=tag><<span class=name>title</span>></span>Simple Page Marker<span class=tag>&LT/<span class=name>title</span>></span></span><br><span class=line> <span class=tag><<span class=name>link</span> <span class=attr>rel</span>=<span class=string>"stylesheet"</span> <span class=attr>href</span>=<span class=string>"popup.css"</span> /></span></span><br><span class=line> <span class=tag>&LT/<span class=name>head</span>></span></span><br><span class=line> <span class=tag><<span class=name>body</span>></span></span><br><span class=line> <span class=tag><<span class=name>main</span> <span class=attr>class</span>=<span class=string>"panel"</span>></span></span><br><span class=line> <span class=tag><<span class=name>h1</span>></span>Page Marker<span class=tag>&LT/<span class=name>h1</span>></span></span><br><span class=line></span><br><span class=line> <span class=tag><<span class=name>p</span>></span></span><br><span class=line> 点击按钮后,扩展会给当前页面加一个简单标记。</span><br><span class=line> <span class=tag>&LT/<span class=name>p</span>></span></span><br><span class=line></span><br><span class=line> <span class=tag><<span class=name>button</span> <span class=attr>id</span>=<span class=string>"mark"</span> <span class=attr>type</span>=<span class=string>"button"</span>></span></span><br><span class=line> 标记当前页面</span><br><span class=line> <span class=tag>&LT/<span class=name>button</span>></span></span><br><span class=line></span><br><span class=line> <span class=tag><<span class=name>p</span> <span class=attr>id</span>=<span class=string>"status"</span> <span class=attr>class</span>=<span class=string>"status"</span>></span><span class=tag>&LT/<span class=name>p</span>></span></span><br><span class=line> <span class=tag>&LT/<span class=name>main</span>></span></span><br><span class=line></span><br><span class=line> <span class=tag><<span class=name>script</span> <span class=attr>src</span>=<span class=string>"popup.js"</span>></span><span class=tag>&LT/<span class=name>script</span>></span></span><br><span class=line> <span class=tag>&LT/<span class=name>body</span>></span></span><br><span class=line><span class=tag>&LT/<span class=name>html</span>></span></span><br></pre></table></figure><p>这里就是一个很普通的 HTML 页面。<p>比较容易混淆的地方是,虽然它看起来也是一个页面,但是这个页面并不是当前打开的网站,而是扩展自己的页面。<p>比如在 <code>popup.js</code> 中:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class=string>'#status'</span>)</span><br></pre></table></figure><p>这里的 <code>document</code> 指的是 <code>popup.html</code>。<p>如果我们在这里修改:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span>.<span class=property>body</span>.<span class=property>style</span>.<span class=property>backgroundColor</span> = <span class=string>'red'</span>;</span><br></pre></table></figure><p>修改的是扩展弹窗,而不是当前打开的网站。<p>真正要修改网页,需要通过 <code>content script</code> 来完成。<h3 id=popup-js><a class=headerlink href=#popup-js title=popup.js></a>popup.js</h3><p>先看下点击按钮以后的代码。<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br><span class=line>30</span><br><span class=line>31</span><br><span class=line>32</span><br><span class=line>33</span><br></pre><td class=code><pre><span class=line><span class=keyword>const</span> markButton = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class=string>'mark'</span>);</span><br><span class=line><span class=keyword>const</span> statusText = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class=string>'status'</span>);</span><br><span class=line></span><br><span class=line>markButton.<span class="title function_">addEventListener</span>(<span class=string>'click'</span>, <span class=keyword>async</span> () => {</span><br><span class=line> statusText.<span class=property>textContent</span> = <span class=string>''</span>;</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> [tab] = <span class=keyword>await</span> chrome.<span class=property>tabs</span>.<span class="title function_">query</span>({</span><br><span class=line> <span class=attr>active</span>: <span class=literal>true</span>,</span><br><span class=line> <span class=attr>currentWindow</span>: <span class=literal>true</span></span><br><span class=line> });</span><br><span class=line></span><br><span class=line> <span class=keyword>if</span> (!tab || !tab.<span class=property>id</span>) {</span><br><span class=line> statusText.<span class=property>textContent</span> = <span class=string>'没有找到当前标签页'</span>;</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> chrome.<span class=property>tabs</span>.<span class="title function_">sendMessage</span>(</span><br><span class=line> tab.<span class=property>id</span>,</span><br><span class=line> {</span><br><span class=line> <span class=attr>type</span>: <span class=string>'MARK_PAGE'</span></span><br><span class=line> },</span><br><span class=line> <span class=function>(<span class=params>response</span>) =></span> {</span><br><span class=line> <span class=keyword>if</span> (chrome.<span class=property>runtime</span>.<span class=property>lastError</span>) {</span><br><span class=line> statusText.<span class=property>textContent</span> =</span><br><span class=line> <span class=string>'当前页面暂时不能注入脚本'</span>;</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> statusText.<span class=property>textContent</span> =</span><br><span class=line> response?.<span class=property>ok</span> ? <span class=string>'页面已标记'</span> : <span class=string>'标记失败'</span>;</span><br><span class=line> }</span><br><span class=line> );</span><br><span class=line>});</span><br></pre></table></figure><p>首先是这一段:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br></pre><td class=code><pre><span class=line><span class=keyword>const</span> [tab] = <span class=keyword>await</span> chrome.<span class=property>tabs</span>.<span class="title function_">query</span>({</span><br><span class=line> <span class=attr>active</span>: <span class=literal>true</span>,</span><br><span class=line> <span class=attr>currentWindow</span>: <span class=literal>true</span></span><br><span class=line>});</span><br></pre></table></figure><p><code>chrome.tabs.query</code> 用来查询浏览器中的标签页。<p>这里传入了两个条件:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br></pre><td class=code><pre><span class=line><span class=attr>active</span>: <span class=literal>true</span></span><br><span class=line><span class=attr>currentWindow</span>: <span class=literal>true</span></span><br></pre></table></figure><p>表示查询当前窗口中处于激活状态的标签页。<p>因为返回结果是一个数组,所以这里直接使用数组解构取第一个:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class=keyword>const</span> [tab] = ...</span><br></pre></table></figure><p>拿到当前标签页以后,真正重要的是下面这段:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br></pre><td class=code><pre><span class=line>chrome.<span class=property>tabs</span>.<span class="title function_">sendMessage</span>(</span><br><span class=line> tab.<span class=property>id</span>,</span><br><span class=line> {</span><br><span class=line> <span class=attr>type</span>: <span class=string>'MARK_PAGE'</span></span><br><span class=line> },</span><br><span class=line> callback</span><br><span class=line>);</span><br></pre></table></figure><p>这里是给当前标签页发送消息。<p>消息内容只是一个普通的 JavaScript 对象:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line>{</span><br><span class=line> <span class=attr>type</span>: <span class=string>'MARK_PAGE'</span></span><br><span class=line>}</span><br></pre></table></figure><p>可以把它理解成告诉网页里的 <code>content.js</code>:<blockquote><p>请执行一个叫做 <code>MARK_PAGE</code> 的操作。</blockquote><p>扩展的不同部分之间不能直接共享变量,一般就是通过这种消息来通信。<h3 id=content-js><a class=headerlink href=#content-js title=content.js></a>content.js</h3><p>下面是真正修改网页的代码。<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br><span class=line>30</span><br><span class=line>31</span><br><span class=line>32</span><br><span class=line>33</span><br><span class=line>34</span><br><span class=line>35</span><br><span class=line>36</span><br><span class=line>37</span><br><span class=line>38</span><br><span class=line>39</span><br><span class=line>40</span><br><span class=line>41</span><br><span class=line>42</span><br><span class=line>43</span><br><span class=line>44</span><br><span class=line>45</span><br></pre><td class=code><pre><span class=line>chrome.<span class=property>runtime</span>.<span class=property>onMessage</span>.<span class="title function_">addListener</span>(</span><br><span class=line> <span class=function>(<span class=params>message, sender, sendResponse</span>) =></span> {</span><br><span class=line> <span class=keyword>if</span> (message.<span class=property>type</span> !== <span class=string>'MARK_PAGE'</span>) {</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> <span class="variable language_">document</span>.<span class=property>body</span>.<span class=property>style</span>.<span class=property>backgroundColor</span> = <span class=string>'#fff7cc'</span>;</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> oldMarker = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(</span><br><span class=line> <span class=string>'simple-page-marker'</span></span><br><span class=line> );</span><br><span class=line></span><br><span class=line> <span class=keyword>if</span> (oldMarker) {</span><br><span class=line> oldMarker.<span class="title function_">remove</span>();</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> marker = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class=string>'div'</span>);</span><br><span class=line></span><br><span class=line> marker.<span class=property>id</span> = <span class=string>'simple-page-marker'</span>;</span><br><span class=line> marker.<span class=property>textContent</span> =</span><br><span class=line> <span class=string>'This page was marked by Simple Page Marker.'</span>;</span><br><span class=line></span><br><span class=line> <span class="title class_">Object</span>.<span class="title function_">assign</span>(marker.<span class=property>style</span>, {</span><br><span class=line> <span class=attr>position</span>: <span class=string>'fixed'</span>,</span><br><span class=line> <span class=attr>right</span>: <span class=string>'16px'</span>,</span><br><span class=line> <span class=attr>bottom</span>: <span class=string>'16px'</span>,</span><br><span class=line> <span class=attr>zIndex</span>: <span class=string>'2147483647'</span>,</span><br><span class=line> <span class=attr>padding</span>: <span class=string>'10px 12px'</span>,</span><br><span class=line> <span class=attr>color</span>: <span class=string>'#fff'</span>,</span><br><span class=line> <span class=attr>background</span>: <span class=string>'#202124'</span>,</span><br><span class=line> <span class=attr>borderRadius</span>: <span class=string>'6px'</span>,</span><br><span class=line> <span class=attr>boxShadow</span>: <span class=string>'0 4px 14px rgba(0, 0, 0, 0.24)'</span>,</span><br><span class=line> <span class=attr>fontSize</span>: <span class=string>'14px'</span>,</span><br><span class=line> <span class=attr>lineHeight</span>: <span class=string>'1.4'</span>,</span><br><span class=line> <span class=attr>fontFamily</span>:</span><br><span class=line> <span class=string>'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'</span></span><br><span class=line> });</span><br><span class=line></span><br><span class=line> <span class="variable language_">document</span>.<span class=property>body</span>.<span class="title function_">appendChild</span>(marker);</span><br><span class=line></span><br><span class=line> <span class="title function_">sendResponse</span>({</span><br><span class=line> <span class=attr>ok</span>: <span class=literal>true</span></span><br><span class=line> });</span><br><span class=line> }</span><br><span class=line>);</span><br></pre></table></figure><p>这一段是监听消息:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>chrome.<span class=property>runtime</span>.<span class=property>onMessage</span>.<span class="title function_">addListener</span>(...)</span><br></pre></table></figure><p>当 <code>popup.js</code> 发送消息以后,这个监听器就会被调用。<p>首先判断消息类型:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line><span class=keyword>if</span> (message.<span class=property>type</span> !== <span class=string>'MARK_PAGE'</span>) {</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line>}</span><br></pre></table></figure><p>因为以后可能还会有很多操作,比如:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line>{</span><br><span class=line> <span class=attr>type</span>: <span class=string>'GET_SELECTION'</span></span><br><span class=line>}</span><br></pre></table></figure><p>或者:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line>{</span><br><span class=line> <span class=attr>type</span>: <span class=string>'EXTRACT_ARTICLE'</span></span><br><span class=line>}</span><br></pre></table></figure><p>所以一般会通过 <code>type</code> 来区分不同的消息。<p>然后这里:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span>.<span class=property>body</span>.<span class=property>style</span>.<span class=property>backgroundColor</span> = <span class=string>'#fff7cc'</span>;</span><br></pre></table></figure><p>此时的 <code>document</code> 就不一样了。<p>因为这段代码运行在网页中,所以这里的 <code>document</code> 是当前网站的 DOM,可以直接修改网页背景。<p>接着创建一个提示框:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class=keyword>const</span> marker = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class=string>'div'</span>);</span><br></pre></table></figure><p>设置一些样式以后:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span>.<span class=property>body</span>.<span class="title function_">appendChild</span>(marker);</span><br></pre></table></figure><p>就把它插入到了当前网页中。<p>最后:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line><span class="title function_">sendResponse</span>({</span><br><span class=line> <span class=attr>ok</span>: <span class=literal>true</span></span><br><span class=line>});</span><br></pre></table></figure><p>把执行结果返回给 <code>popup.js</code>。<p>于是整个调用链就是:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br></pre><td class=code><pre><span class=line>点击 popup 中的按钮</span><br><span class=line> ↓</span><br><span class=line>popup.js 找到当前标签页</span><br><span class=line> ↓</span><br><span class=line>tabs.sendMessage 发送 MARK_PAGE</span><br><span class=line> ↓</span><br><span class=line>content.js 收到消息</span><br><span class=line> ↓</span><br><span class=line>修改当前网页 DOM</span><br><span class=line> ↓</span><br><span class=line>sendResponse 返回执行结果</span><br><span class=line> ↓</span><br><span class=line>popup 显示“页面已标记”</span><br></pre></table></figure><h3 id=popup-和-content-script-的区别><a title="popup 和 content script 的区别" class=headerlink href=#popup-和-content-script-的区别></a>popup 和 content script 的区别</h3><p>这里其实是 Chrome 扩展里最重要的一个概念。<p><code>popup.js</code> 和 <code>content.js</code> 虽然都是 JavaScript,但是运行环境不一样。<p>可以简单看成:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br></pre><td class=code><pre><span class=line>扩展自己的环境</span><br><span class=line>├── popup.html</span><br><span class=line>├── popup.js</span><br><span class=line>└── service-worker.js</span><br><span class=line></span><br><span class=line>网页环境</span><br><span class=line>└── content.js</span><br><span class=line> └── 当前网页的 document</span><br></pre></table></figure><p>所以在 <code>popup.js</code> 里面:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span>.<span class=property>body</span></span><br></pre></table></figure><p>拿到的是弹窗页面。<p>在 <code>content.js</code> 里面:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span>.<span class=property>body</span></span><br></pre></table></figure><p>拿到的是当前网站页面。<p>这也是为什么 <code>popup.js</code> 不能直接修改网页,必须通过消息把操作交给 <code>content.js</code>。<p>Chrome 这里还有一个隔离环境的概念。<p><code>content script</code> 可以访问网页的 DOM,但是它定义的 JavaScript 变量不会直接和网页脚本混在一起。<p>比如网页中有一个变量:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class=keyword>const</span> userName = <span class=string>'page'</span>;</span><br></pre></table></figure><p>扩展的 <code>content.js</code> 中也有:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class=keyword>const</span> userName = <span class=string>'extension'</span>;</span><br></pre></table></figure><p>一般不会因为变量名相同就互相覆盖。<p>不过它们仍然共享网页的 DOM,所以 <code>content.js</code> 还是可以:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(...)</span><br><span class=line><span class="variable language_">document</span>.<span class="title function_">createElement</span>(...)</span><br><span class=line><span class="variable language_">document</span>.<span class=property>body</span>.<span class="title function_">appendChild</span>(...)</span><br></pre></table></figure><p>相关说明可以看 <a href=https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts rel=noopener target=_blank>Chrome Content Scripts</a>。<h3 id=加载扩展><a class=headerlink href=#加载扩展 title=加载扩展></a>加载扩展</h3><p>打开:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>chrome://extensions</span><br></pre></table></figure><p>然后:<ol><li>打开右上角的 Developer mode<li>点击 Load unpacked<li>选择 <code>chrome-extension-demo</code> 目录<li>打开一个普通网页<li>点击扩展图标<li>点击“标记当前页面”</ol><p>如果修改了 <code>manifest.json</code>,需要在扩展管理页面重新加载扩展。<p>如果修改了 <code>content.js</code>,一般还需要重新加载扩展并刷新网页,因为脚本是在网页加载时注入的。<h3 id=为什么有些页面不能使用><a class=headerlink href=#为什么有些页面不能使用 title=为什么有些页面不能使用></a>为什么有些页面不能使用</h3><p>如果在下面这些页面中点击扩展:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br></pre><td class=code><pre><span class=line>chrome://extensions</span><br><span class=line>chrome://settings</span><br><span class=line>chrome://flags</span><br><span class=line>Chrome Web Store</span><br></pre></table></figure><p>可能会出现:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>当前页面暂时不能注入脚本</span><br></pre></table></figure><p>这通常不是代码写错了,而是浏览器内部页面本身不允许扩展注入脚本。<p>所以这段错误处理还是需要有的:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br></pre><td class=code><pre><span class=line><span class=keyword>if</span> (chrome.<span class=property>runtime</span>.<span class=property>lastError</span>) {</span><br><span class=line> statusText.<span class=property>textContent</span> =</span><br><span class=line> <span class=string>'当前页面暂时不能注入脚本'</span>;</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line>}</span><br></pre></table></figure><h3 id=如果是异步操作><a class=headerlink href=#如果是异步操作 title=如果是异步操作></a>如果是异步操作</h3><p>当前例子里面,<code>content.js</code> 收到消息后马上就返回了结果。<p>如果中间需要进行异步操作,例如请求接口:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br></pre><td class=code><pre><span class=line>chrome.<span class=property>runtime</span>.<span class=property>onMessage</span>.<span class="title function_">addListener</span>(</span><br><span class=line> <span class=function>(<span class=params>message, sender, sendResponse</span>) =></span> {</span><br><span class=line> <span class="title function_">fetch</span>(<span class=string>'https://example.com/api'</span>)</span><br><span class=line> .<span class="title function_">then</span>(<span class=function><span class=params>response</span> =></span> response.<span class="title function_">json</span>())</span><br><span class=line> .<span class="title function_">then</span>(<span class=function><span class=params>data</span> =></span> {</span><br><span class=line> <span class="title function_">sendResponse</span>({</span><br><span class=line> <span class=attr>ok</span>: <span class=literal>true</span>,</span><br><span class=line> data</span><br><span class=line> });</span><br><span class=line> });</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> <span class=literal>true</span>;</span><br><span class=line> }</span><br><span class=line>);</span><br></pre></table></figure><p>这里的:<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class=keyword>return</span> <span class=literal>true</span>;</span><br></pre></table></figure><p>是比较容易漏掉的。<p>它表示当前消息还不会马上响应,需要保留通信通道,等异步请求结束以后再调用 <code>sendResponse</code>。<p>具体可以看 <a href=https://developer.chrome.com/docs/extensions/develop/concepts/messaging rel=noopener target=_blank>Chrome Message Passing</a>。<h3 id=activeTab-和-content-scripts><a title="activeTab 和 content_scripts" class=headerlink href=#activeTab-和-content-scripts></a>activeTab 和 content_scripts</h3><p>这次在 <code>manifest.json</code> 中同时配置了:<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br></pre><td class=code><pre><span class=line><span class=attr>"permissions"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"activeTab"</span></span><br><span class=line><span class=punctuation>]</span></span><br></pre></table></figure><p>以及:<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br></pre><td class=code><pre><span class=line><span class=attr>"content_scripts"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=punctuation>{</span></span><br><span class=line> <span class=attr>"matches"</span><span class=punctuation>:</span> <span class=punctuation>[</span><span class=string>"&LTall_urls>"</span><span class=punctuation>]</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"js"</span><span class=punctuation>:</span> <span class=punctuation>[</span><span class=string>"content.js"</span><span class=punctuation>]</span></span><br><span class=line> <span class=punctuation>}</span></span><br><span class=line><span class=punctuation>]</span></span><br></pre></table></figure><p>这两个配置实际作用不完全一样。<p><code>content_scripts</code> 负责决定 <code>content.js</code> 自动注入哪些页面。<p><code>activeTab</code> 则表示用户主动操作扩展以后,可以临时访问当前标签页。<p>如果扩展不需要监听所有页面,只在用户点击扩展时执行代码,也可以使用:<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br></pre><td class=code><pre><span class=line><span class=attr>"permissions"</span><span class=punctuation>:</span> <span class=punctuation>[</span></span><br><span class=line> <span class=string>"activeTab"</span><span class=punctuation>,</span></span><br><span class=line> <span class=string>"scripting"</span></span><br><span class=line><span class=punctuation>]</span></span><br></pre></table></figure><p>然后通过 <code>chrome.scripting.executeScript</code> 动态注入代码。<p>当前这个例子为了简单,还是使用静态的 <code>content_scripts</code>。<h3 id=最后><a class=headerlink href=#最后 title=最后></a>最后</h3><p>Chrome 扩展最开始看起来就是一些 HTML、CSS 和 JavaScript 文件,但是它和普通网页还是有一些区别。<p>比较重要的是先理解这几个东西:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br></pre><td class=code><pre><span class=line>manifest.json 负责配置</span><br><span class=line>popup 负责扩展弹窗交互</span><br><span class=line>content script 负责操作网页 DOM</span><br><span class=line>message 负责不同环境之间通信</span><br><span class=line>service worker 负责后台事件和扩展全局逻辑</span><br></pre></table></figure><p>这次的例子虽然只是给网页换了个背景色,但是从点击按钮到修改网页,已经把 Chrome 扩展最基本的一条链路走通了。<p>后面如果要做网页翻译、页面摘要、读取选中文本,基本也都是在这个结构上继续扩展。<br>这里使用content相当于是一个持久化的脚本注入,如果只是临时要抓取一下网页内容<br>可以直接在popup里调用<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class=keyword>await</span> chrome.<span class=property>scripting</span>.<span class=property>executeScript</span></span><br></pre></table></figure><p>这种相当于是每点一次调一次,那么参数上下文这些每次都要重新传<br>而通过content的话相当于是有个server注入在网页里<br>可以通过消息的形式让它做对应的处理<br>各有优势,主要是学习下chrome扩展的这些机制<br>而对于之前的mv2版本也是类似的,只不过是之前可以直接注入整个content.js用来执行<br>所以看起来像是mv2可以直接在popup里执行tab网页的dom操作<br>实际上并不是,而是通过注入整个content.js来执行的<br>整体来说还是一样,所以chrome扩展的大致执行机制就是这样<br>在自己实现的时候可以自行选择方式<br>而如果通过background.js的方式的话<br>比如点击 popup 中的按钮,让当前页面变色,有两种方式。<br>简单方式:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br></pre><td class=code><pre><span class=line>popup.js</span><br><span class=line> └── tabs.sendMessage</span><br><span class=line> └── content.js</span><br><span class=line> └── 修改 DOM</span><br></pre></table></figure><p>如果需要通过后台统一处理:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br></pre><td class=code><pre><span class=line>popup.js</span><br><span class=line> └── runtime.sendMessage</span><br><span class=line> ↓</span><br><span class=line>background.js</span><br><span class=line> └── tabs.sendMessage</span><br><span class=line> ↓</span><br><span class=line>content.js</span><br><span class=line> └── 修改网页 DOM</span><br></pre></table></figure><p>popup.js<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br></pre><td class=code><pre><span class=line><span class="variable language_">document</span></span><br><span class=line> .<span class="title function_">getElementById</span>(<span class=string>'mark'</span>)</span><br><span class=line> .<span class="title function_">addEventListener</span>(<span class=string>'click'</span>, <span class=function>() =></span> {</span><br><span class=line> chrome.<span class=property>runtime</span>.<span class="title function_">sendMessage</span>({</span><br><span class=line> <span class=attr>type</span>: <span class=string>'MARK_CURRENT_TAB'</span></span><br><span class=line> });</span><br><span class=line> });</span><br></pre></table></figure><p>background.js<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br><span class=line>30</span><br><span class=line>31</span><br><span class=line>32</span><br><span class=line>33</span><br><span class=line>34</span><br><span class=line>35</span><br><span class=line>36</span><br></pre><td class=code><pre><span class=line>chrome.<span class=property>runtime</span>.<span class=property>onMessage</span>.<span class="title function_">addListener</span>(</span><br><span class=line> <span class=function>(<span class=params>message, sender, sendResponse</span>) =></span> {</span><br><span class=line> <span class=keyword>if</span> (message.<span class=property>type</span> !== <span class=string>'MARK_CURRENT_TAB'</span>) {</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> chrome.<span class=property>tabs</span>.<span class="title function_">query</span>(</span><br><span class=line> {</span><br><span class=line> <span class=attr>active</span>: <span class=literal>true</span>,</span><br><span class=line> <span class=attr>currentWindow</span>: <span class=literal>true</span></span><br><span class=line> },</span><br><span class=line> <span class=function>(<span class=params>tabs</span>) =></span> {</span><br><span class=line> <span class=keyword>const</span> tab = tabs[<span class=number>0</span>];</span><br><span class=line></span><br><span class=line> <span class=keyword>if</span> (!tab?.<span class=property>id</span>) {</span><br><span class=line> <span class="title function_">sendResponse</span>({</span><br><span class=line> <span class=attr>ok</span>: <span class=literal>false</span></span><br><span class=line> });</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> chrome.<span class=property>tabs</span>.<span class="title function_">sendMessage</span>(</span><br><span class=line> tab.<span class=property>id</span>,</span><br><span class=line> {</span><br><span class=line> <span class=attr>type</span>: <span class=string>'MARK_PAGE'</span></span><br><span class=line> },</span><br><span class=line> <span class=function>(<span class=params>response</span>) =></span> {</span><br><span class=line> <span class="title function_">sendResponse</span>(response);</span><br><span class=line> }</span><br><span class=line> );</span><br><span class=line> }</span><br><span class=line> );</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> <span class=literal>true</span>;</span><br><span class=line> }</span><br><span class=line>);</span><br></pre></table></figure><p>content.js<figure class="highlight js"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br></pre><td class=code><pre><span class=line>chrome.<span class=property>runtime</span>.<span class=property>onMessage</span>.<span class="title function_">addListener</span>(</span><br><span class=line> <span class=function>(<span class=params>message, sender, sendResponse</span>) =></span> {</span><br><span class=line> <span class=keyword>if</span> (message.<span class=property>type</span> !== <span class=string>'MARK_PAGE'</span>) {</span><br><span class=line> <span class=keyword>return</span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> <span class="variable language_">document</span>.<span class=property>body</span>.<span class=property>style</span>.<span class=property>backgroundColor</span> = <span class=string>'#fff7cc'</span>;</span><br><span class=line></span><br><span class=line> <span class="title function_">sendResponse</span>({</span><br><span class=line> <span class=attr>ok</span>: <span class=literal>true</span></span><br><span class=line> });</span><br><span class=line> }</span><br><span class=line>);</span><br></pre></table></figure><p>这里有两次消息传递:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br></pre><td class=code><pre><span class=line>popup.js</span><br><span class=line> └── runtime.sendMessage</span><br><span class=line> ↓</span><br><span class=line>background.js</span><br><span class=line> └── tabs.sendMessage</span><br><span class=line> ↓</span><br><span class=line>content.js</span><br></pre></table></figure><p>为什么需要 background?<br>如果只是一个按钮点击操作,实际上不需要 background:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>popup.js → content.js</span><br></pre></table></figure><p>已经够了。<br>但是下面这些场景就比较适合加入 background:<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br></pre><td class=code><pre><span class=line>用户按快捷键</span><br><span class=line> ↓</span><br><span class=line>background.js 收到事件</span><br><span class=line> ↓</span><br><span class=line>找到当前标签页</span><br><span class=line> ↓</span><br><span class=line>通知 content.js 执行操作</span><br></pre></table></figure><p>或者<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br></pre><td class=code><pre><span class=line>content.js 读取网页内容</span><br><span class=line> ↓</span><br><span class=line>background.js 请求接口</span><br><span class=line> ↓</span><br><span class=line>background.js 保存结果</span><br><span class=line> ↓</span><br><span class=line>content.js 更新页面</span><br></pre></table></figure><p>因为 popup 会随时关闭,不能依赖它长期存在。<br>MV3 中不再使用传统的 background.js 页面,而是使用扩展 Service Worker:<figure class="highlight json"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br></pre><td class=code><pre><span class=line><span class=punctuation>{</span></span><br><span class=line> <span class=attr>"manifest_version"</span><span class=punctuation>:</span> <span class=number>3</span><span class=punctuation>,</span></span><br><span class=line> <span class=attr>"background"</span><span class=punctuation>:</span> <span class=punctuation>{</span></span><br><span class=line> <span class=attr>"service_worker"</span><span class=punctuation>:</span> <span class=string>"service-worker.js"</span></span><br><span class=line> <span class=punctuation>}</span></span><br><span class=line><span class=punctuation>}</span></span><br></pre></table></figure><p>调用关系没变<figure class="highlight text"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br></pre><td class=code><pre><span class=line>popup</span><br><span class=line> ↕</span><br><span class=line>service-worker.js</span><br><span class=line> ↕</span><br><span class=line>content script</span><br></pre></table></figure><p>Service Worker 是事件驱动的,不会一直运行。没有事件时可能被 Chrome 暂停,后续事件到来时再重新启动,因此不能把重要状态只放在全局变量中,应该放到 chrome.storage 中。<br>另外,MV3 的扩展 Service Worker 本身也不能访问网页 DOM。<a href=https://developer.chrome.com/docs/extensions/develop/concepts/service-workers rel=noopener target=_blank>About extension service workers</a><br>这样就大致知道了chrome开发的主体逻辑</div><footer class=post-footer><div class="affiliate-creative affiliate-creative--post-end" data-affiliate-id=tencent-cloud-general><a rel="sponsored noopener" aria-label=腾讯云产品优惠 href=https://cloud.tencent.com/act/cps/redirect?redirect=2446&cps_key=2e33a1eedb380997d03618b4a5ba6ca7&from=console target=_blank><img alt=腾讯云服务器、数据库和云产品优惠 decoding=async height=419 loading=lazy src=/uploads/affiliate/tencent-cloud-general.webp width=690> </a><span class=affiliate-disclosure>推广</span></div><div class=reward-container><div>请我一杯咖啡吧!</div><button>赞赏</button><div class=post-reward><div><img alt="Nicksxs 微信" src=https://i.loli.net/2020/01/12/NUlWanT31E8LQGx.png><span>微信</span></div><div><img alt="Nicksxs 支付宝" src=https://ooo.0o0.ooo/2016/08/17/57b421e773057.jpg><span>支付宝</span></div></div></div><div class=post-copyright><ul><li class=post-copyright-author><strong>本文作者: </strong>Nicksxs<li class=post-copyright-link><strong>本文链接:</strong> <a href=https://nicksxs.me/2026/07/12/%E5%AD%A6%E4%B8%80%E4%B8%8Bchrome%E7%9A%84%E6%89%A9%E5%B1%95%E5%BC%80%E5%8F%91/ title=学一下chrome的扩展开发>https://nicksxs.me/2026/07/12/学一下chrome的扩展开发/</a><li class=post-copyright-license><strong>版权声明: </strong>本博客所有文章除特别声明外,均采用 <a href=https://creativecommons.org/licenses/by-nc-sa/4.0/ rel=noopener target=_blank><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处!</ul></div><div class=post-tags><a href=/tags/Chrome/ rel=tag># Chrome</a><a href=/tags/Chrome-Extension/ rel=tag># Chrome Extension</a><a href=/tags/JavaScript/ rel=tag># JavaScript</a></div><div class=post-nav><div class=post-nav-item><a href=/2026/07/05/%E7%9C%8B%E4%B8%8Bchrome%E7%9A%84%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9E%8B/ rel=prev title=看下chrome的内置模型><i class="fa fa-angle-left"></i> 看下chrome的内置模型</a></div><div class=post-nav-item><a href=/2026/07/19/%E8%AE%B0%E4%B8%80%E4%B8%AAgiea%E6%8E%A8%E9%80%81%E5%A4%B1%E8%B4%A5%E7%9A%84%E9%97%AE%E9%A2%98/ rel=next title=记一个gitea推送失败的问题>记一个gitea推送失败的问题 <i class="fa fa-angle-right"></i></a></div></div></footer></article></div><div class=comments id=disqus_thread><noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript></div></div></main><footer class=footer><div class=footer-inner><div class=beian><a href=https://beian.miit.gov.cn/ rel=noopener target=_blank>浙ICP备16002580号-2 </a><img alt src=/uploads/beian.png><a href=https://beian.mps.gov.cn/#/query/webSearch?code=33010602011094 rel=noopener target=_blank>浙公网安备 33010602011094号</a></div><div class=copyright>© <span itemprop=copyrightYear>2026</span><span class=with-love><i class="fa fa-heart"></i> </span><span class=author itemprop=copyrightHolder>Nicksxs</span></div></div></footer><div class="toggle sidebar-toggle" role=button><span class=toggle-line></span><span class=toggle-line></span><span class=toggle-line></span></div><div class=sidebar-dimmer></div><div aria-label=返回顶部 class=back-to-top role=button><i class="fa fa-arrow-up fa-lg"></i><span>0%</span></div><a aria-label="在 GitHub 上关注我" title="在 GitHub 上关注我" class=github-corner href=https://github.com/nicksxs rel=noopener target=_blank><svg viewbox="0 0 250 250" aria-hidden=true height=80 width=80><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" style="transform-origin:130px 106px" class=octo-arm fill=currentColor></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" class=octo-body fill=currentColor></path></svg></a><noscript><div class=noscript-warning>Theme NexT works best with JavaScript enabled</div></noscript><script data-cloudflare-page-counter-config type=application/json>{"enable":true,"endpoint":"https://counter.nicksxs.me","site":"nicksxs","local_cache":true,"timeout":5000,"icon":"far fa-eye","item_text":true}</script><script src=/js/cloudflare-page-counter.js></script><script class=next-config data-name=disqus type=application/json>{"enable":true,"shortname":"nicksxs","count":false,"i18n":{"disqus":"disqus"}}</script><script defer src=/js/third-party/comments/disqus.js></script>