{"id":683,"date":"2025-12-09T17:08:14","date_gmt":"2025-12-09T09:08:14","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=683"},"modified":"2025-12-09T17:08:14","modified_gmt":"2025-12-09T09:08:14","slug":"chrome%e6%8b%93%e5%b1%95%ef%bc%88chrome-extension%ef%bc%89%e5%bc%80%e5%8f%91%e5%ae%9a%e6%97%b6%e4%bb%bb%e5%8a%a1%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/09\/chrome%e6%8b%93%e5%b1%95%ef%bc%88chrome-extension%ef%bc%89%e5%bc%80%e5%8f%91%e5%ae%9a%e6%97%b6%e4%bb%bb%e5%8a%a1%e6%8f%92%e4%bb%b6\/","title":{"rendered":"Chrome\u62d3\u5c55\uff08Chrome\u00a0Extension\uff09\u5f00\u53d1\u5b9a\u65f6\u4efb\u52a1\u63d2\u4ef6"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>\u300aChrome Extension \u5f00\u53d1\u5b9a\u65f6\u4efb\u52a1\u63d2\u4ef6\u5168\u6d41\u7a0b\u6307\u5357\u300b<\/strong>\uff0c\u8986\u76d6\u5f00\u53d1\u601d\u8def\u3001\u6838\u5fc3 API\u3001\u793a\u4f8b\u4ee3\u7801\u548c\u6ce8\u610f\u4e8b\u9879\uff0c\u5e2e\u52a9\u4f60\u5feb\u901f\u5b9e\u73b0 Chrome \u63d2\u4ef6\u4e2d\u7684\u5b9a\u65f6\u4efb\u52a1\u529f\u80fd\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Chrome Extension \u5b9a\u65f6\u4efb\u52a1\u63d2\u4ef6\u5f00\u53d1\u6307\u5357<\/strong><\/h1>\n\n\n\n<p>\u5728 Chrome Extension \u4e2d\u5b9e\u73b0\u5b9a\u65f6\u4efb\u52a1\uff0c\u5e38\u7528\u4e8e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b9a\u671f\u6293\u53d6\u6570\u636e<\/li>\n\n\n\n<li>\u81ea\u52a8\u5237\u65b0\u9875\u9762<\/li>\n\n\n\n<li>\u5b9a\u65f6\u63d0\u9192\u7528\u6237<\/li>\n<\/ul>\n\n\n\n<p>Chrome \u63d0\u4f9b <strong><code>alarms<\/code> API<\/strong>\uff0c\u53ef\u4ee5\u5728\u63d2\u4ef6\u540e\u53f0\u8fd0\u884c\u5b9a\u65f6\u4efb\u52a1\uff0c\u65e0\u9700\u4f9d\u8d56\u7f51\u9875\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u4e00\u3001Chrome Extension \u5b9a\u65f6\u4efb\u52a1\u57fa\u7840\u6982\u5ff5<\/strong><\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6982\u5ff5<\/th><th>\u8bf4\u660e<\/th><\/tr><\/thead><tbody><tr><td>background script<\/td><td>\u63d2\u4ef6\u540e\u53f0\u8fd0\u884c\u811a\u672c\uff0c\u53ef\u6301\u7eed\u76d1\u542c\u4e8b\u4ef6\u548c\u5b9a\u65f6\u4efb\u52a1<\/td><\/tr><tr><td>content script<\/td><td>\u6ce8\u5165\u5230\u7f51\u9875\u4e2d\u7684\u811a\u672c\uff0c\u64cd\u4f5c\u7f51\u9875 DOM<\/td><\/tr><tr><td>alarms API<\/td><td>\u5b9a\u65f6\u4efb\u52a1 API\uff0c\u53ef\u8bbe\u7f6e\u5355\u6b21\u6216\u5468\u671f\u4efb\u52a1<\/td><\/tr><tr><td>manifest.json<\/td><td>\u63d2\u4ef6\u914d\u7f6e\u6587\u4ef6\uff0c\u58f0\u660e\u6743\u9650\u3001\u811a\u672c\u548c\u56fe\u6807\u7b49<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u4e8c\u3001manifest.json \u914d\u7f6e<\/strong><\/h1>\n\n\n\n<p>Chrome Extension v3 \u63a8\u8350\u4f7f\u7528 <strong>Manifest V3<\/strong>\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  &quot;manifest_version&quot;: 3,\n  &quot;name&quot;: &quot;\u5b9a\u65f6\u4efb\u52a1\u63d2\u4ef6\u793a\u4f8b&quot;,\n  &quot;version&quot;: &quot;1.0&quot;,\n  &quot;description&quot;: &quot;Chrome Extension \u5b9a\u65f6\u4efb\u52a1\u63d2\u4ef6&quot;,\n  &quot;permissions&quot;: &#x5B;\n    &quot;alarms&quot;,\n    &quot;storage&quot;\n  ],\n  &quot;background&quot;: {\n    &quot;service_worker&quot;: &quot;background.js&quot;\n  },\n  &quot;action&quot;: {\n    &quot;default_popup&quot;: &quot;popup.html&quot;,\n    &quot;default_icon&quot;: {\n      &quot;16&quot;: &quot;icon16.png&quot;,\n      &quot;48&quot;: &quot;icon48.png&quot;,\n      &quot;128&quot;: &quot;icon128.png&quot;\n    }\n  }\n}\n\n<\/pre><\/div>\n\n\n<p>\u5173\u952e\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>permissions<\/strong> \u5fc5\u987b\u5305\u542b <code>\"alarms\"<\/code><\/li>\n\n\n\n<li><strong>background.service_worker<\/strong> \u6307\u5411\u540e\u53f0\u811a\u672c<\/li>\n\n\n\n<li>Manifest V3 \u4e2d\u4e0d\u518d\u4f7f\u7528 <code>background.page<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u4e09\u3001background.js \u6838\u5fc3\u5b9e\u73b0<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. \u521b\u5efa\u5b9a\u65f6\u4efb\u52a1<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ \u521b\u5efa\u5468\u671f\u6027\u5b9a\u65f6\u4efb\u52a1\uff0c\u6bcf 5 \u5206\u949f\u6267\u884c\u4e00\u6b21\nchrome.alarms.create(&quot;myAlarm&quot;, {\n  periodInMinutes: 5\n});\n\n\/\/ \u521b\u5efa\u4e00\u6b21\u6027\u5b9a\u65f6\u4efb\u52a1\uff0c10 \u5206\u949f\u540e\u6267\u884c\nchrome.alarms.create(&quot;oneTimeAlarm&quot;, {\n  delayInMinutes: 10\n});\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. \u76d1\u542c\u5b9a\u65f6\u4efb\u52a1<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nchrome.alarms.onAlarm.addListener((alarm) =&gt; {\n  if (alarm.name === &quot;myAlarm&quot;) {\n    console.log(&quot;\u5b9a\u65f6\u4efb\u52a1\u89e6\u53d1\uff1a\u6bcf 5 \u5206\u949f\u6267\u884c\u4e00\u6b21&quot;);\n    doPeriodicTask();\n  }\n  if (alarm.name === &quot;oneTimeAlarm&quot;) {\n    console.log(&quot;\u4e00\u6b21\u6027\u4efb\u52a1\u89e6\u53d1&quot;);\n    doOneTimeTask();\n  }\n});\n\nfunction doPeriodicTask() {\n  \/\/ \u8fd9\u91cc\u5199\u4f60\u7684\u5b9a\u65f6\u4efb\u52a1\u903b\u8f91\n  console.log(&quot;\u6267\u884c\u5468\u671f\u6027\u4efb\u52a1\uff0c\u6bd4\u5982\u6293\u53d6\u6570\u636e&quot;);\n}\n\nfunction doOneTimeTask() {\n  console.log(&quot;\u6267\u884c\u4e00\u6b21\u6027\u4efb\u52a1&quot;);\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u56db\u3001popup.html \u793a\u4f8b\uff08\u53ef\u624b\u52a8\u63a7\u5236\u4efb\u52a1\uff09<\/strong><\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html&gt;\n&amp;lt;head&gt;\n  &amp;lt;title&gt;\u5b9a\u65f6\u4efb\u52a1\u63a7\u5236&amp;lt;\/title&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n  &amp;lt;button id=&quot;start&quot;&gt;\u542f\u52a8\u5b9a\u65f6\u4efb\u52a1&amp;lt;\/button&gt;\n  &amp;lt;button id=&quot;stop&quot;&gt;\u505c\u6b62\u5b9a\u65f6\u4efb\u52a1&amp;lt;\/button&gt;\n\n  &amp;lt;script src=&quot;popup.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u4e94\u3001popup.js \u63a7\u5236\u540e\u53f0\u5b9a\u65f6\u4efb\u52a1<\/strong><\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ndocument.getElementById(&quot;start&quot;).addEventListener(&quot;click&quot;, () =&gt; {\n  chrome.alarms.create(&quot;myAlarm&quot;, { periodInMinutes: 5 });\n  alert(&quot;\u5b9a\u65f6\u4efb\u52a1\u5df2\u542f\u52a8&quot;);\n});\n\ndocument.getElementById(&quot;stop&quot;).addEventListener(&quot;click&quot;, () =&gt; {\n  chrome.alarms.clear(&quot;myAlarm&quot;, (wasCleared) =&gt; {\n    if (wasCleared) alert(&quot;\u5b9a\u65f6\u4efb\u52a1\u5df2\u505c\u6b62&quot;);\n  });\n});\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u516d\u3001\u5e38\u89c1\u5e94\u7528\u573a\u666f<\/strong><\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5b9a\u65f6\u6293\u53d6\u7f51\u9875\u6570\u636e<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 <code>fetch()<\/code> \u5728\u540e\u53f0\u83b7\u53d6\u6570\u636e<\/li>\n\n\n\n<li>\u5b58\u50a8\u5230 <code>chrome.storage.local<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5b9a\u65f6\u5237\u65b0\u6807\u7b7e\u9875<\/strong> <code>chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.tabs.reload(tabs[0].id); });<\/code><\/li>\n\n\n\n<li><strong>\u5b9a\u65f6\u63d0\u9192\u7528\u6237<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u53ef\u7ed3\u5408 <code>notifications<\/code> API<\/li>\n\n\n\n<li>\u6bcf\u9694\u56fa\u5b9a\u65f6\u95f4\u5f39\u51fa\u63d0\u9192<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u4e03\u3001\u6ce8\u610f\u4e8b\u9879<\/strong><\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Manifest V3 background \u811a\u672c\u662f service_worker<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4e0d\u652f\u6301\u957f\u671f\u5e38\u9a7b<\/li>\n\n\n\n<li>\u53ea\u80fd\u5728\u4e8b\u4ef6\u89e6\u53d1\u65f6\u8fd0\u884c<\/li>\n\n\n\n<li><code>alarms<\/code> API \u4f1a\u5524\u9192 service worker<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Chrome \u9650\u5236\u6700\u5c0f\u5468\u671f<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>periodInMinutes<\/code> \u6700\u5c0f\u4e3a <strong>1 \u5206\u949f<\/strong><\/li>\n\n\n\n<li>\u5c0f\u4e8e 1 \u5206\u949f\u7684\u5b9a\u65f6\u4efb\u52a1\u53ef\u80fd\u4e0d\u89e6\u53d1<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6301\u4e45\u5b58\u50a8<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5b9a\u65f6\u4efb\u52a1\u7684\u72b6\u6001\u53ef\u7528 <code>chrome.storage<\/code> \u4fdd\u5b58<\/li>\n\n\n\n<li>\u4f8b\u5982\u5b58\u50a8\u4e0a\u6b21\u6267\u884c\u65f6\u95f4\u6216\u4efb\u52a1\u72b6\u6001<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u8c03\u8bd5\u6280\u5de7<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6253\u5f00 Chrome \u6269\u5c55\u9875\u9762 \u2192 \u70b9\u51fb <strong>background page<\/strong> \u67e5\u770b\u65e5\u5fd7<\/li>\n\n\n\n<li>\u4f7f\u7528 <code>console.log()<\/code> \u8ffd\u8e2a\u4efb\u52a1\u89e6\u53d1\u60c5\u51b5<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u516b\u3001\u5b8c\u6574\u63d2\u4ef6\u76ee\u5f55\u7ed3\u6784\u793a\u4f8b<\/strong><\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nmy-timer-extension\/\n\u2502\n\u251c\u2500 manifest.json\n\u251c\u2500 background.js\n\u251c\u2500 popup.html\n\u251c\u2500 popup.js\n\u251c\u2500 icon16.png\n\u251c\u2500 icon48.png\n\u2514\u2500 icon128.png\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u4e5d\u3001\u6269\u5c55\u529f\u80fd\u5efa\u8bae<\/strong><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u652f\u6301\u591a\u4efb\u52a1\u7ba1\u7406\uff0c\u6bcf\u4e2a\u4efb\u52a1\u53ef\u5355\u72ec\u8bbe\u7f6e\u5468\u671f<\/li>\n\n\n\n<li>\u7ed3\u5408 <code>chrome.notifications<\/code> \u6216 <code>badge<\/code> \u63d0\u793a\u4efb\u52a1\u72b6\u6001<\/li>\n\n\n\n<li>\u4f7f\u7528 <code>chrome.storage<\/code> \u4fdd\u5b58\u7528\u6237\u914d\u7f6e\uff0c\u652f\u6301\u81ea\u5b9a\u4e49\u5468\u671f<\/li>\n\n\n\n<li>\u914d\u5408 content script \u64cd\u4f5c\u7f51\u9875 DOM\uff0c\u5b9e\u73b0\u81ea\u52a8\u5316\u884c\u4e3a<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd \u300aChrome Extension \u5f00\u53d1\u5b9a\u65f6\u4efb\u52a1\u63d2\u4ef6\u5168\u6d41\u7a0b\u6307\u5357&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/09\/chrome%e6%8b%93%e5%b1%95%ef%bc%88chrome-extension%ef%bc%89%e5%bc%80%e5%8f%91%e5%ae%9a%e6%97%b6%e4%bb%bb%e5%8a%a1%e6%8f%92%e4%bb%b6\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-683","post","type-post","status-publish","format-standard","hentry","category-2"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=683"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/683\/revisions"}],"predecessor-version":[{"id":684,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/683\/revisions\/684"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}