Chrome扩展学习总结

拼搏现实的明天。 2024-02-19 22:01 25阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td style="width:156px;"><strong>资料</strong></td> 
   <td style="width:693px;"><a href="https://developer.chrome.com/extensions/getstarted" rel="nofollow">谷歌官方文档</a>&nbsp;；<a href="http://open.chrome.360.cn/extension_dev/overview.html" rel="nofollow">360极速浏览器开发文档</a>；<a href="https://chajian.baidu.com/developer/extensions/manifest.html#overview.html" rel="nofollow">百度浏览器开发文档</a>；</td> 
  </tr> 
  <tr> 
   <td style="width:156px;"><strong>manifest.json</strong></td> 
   <td style="width:693px;"> <p><a href="http://open.chrome.360.cn/extension_dev/manifest.html" rel="nofollow">http://open.chrome.360.cn/extension_dev/manifest.html</a></p> <p><a href="https://chajian.baidu.com/developer/extensions/manifest.html#overview.html" rel="nofollow">https://chajian.baidu.com/developer/extensions/manifest.html#overview.html</a>&nbsp;【推荐】</p> </td> 
  </tr> 
  <tr> 
   <td style="width:156px;"><strong>chrome.storage</strong></td> 
   <td style="width:693px;"><a href="https://chajian.baidu.com/developer/extensions/storage.html#property-managed" rel="nofollow">https://chajian.baidu.com/developer/extensions/storage.html#property-managed</a></td> 
  </tr> 
  <tr> 
   <td style="width:156px;"><strong>chrome.tabs</strong></td> 
   <td style="width:693px;"><a href="https://chajian.baidu.com/developer/extensions/tabs.html#method-create" rel="nofollow">https://chajian.baidu.com/developer/extensions/tabs.html#method-create</a></td> 
  </tr> 
  <tr> 
   <td style="width:156px;">background.js</td> 
   <td style="width:693px;"> <p>跨域获取资源信息尽可能的写在background.js里面。<br> 在content里面需要获取资源信息的时候通知background去获取。</p> <p><a href="https://www.chromium.org/Home/chromium-security/extension-content-script-fetches" rel="nofollow">https://www.chromium.org/Home/chromium-security/extension-content-script-fetches</a>【需翻墙】</p> </td> 
  </tr> 
  <tr> 
   <td style="width:156px;">content_script.js</td> 
   <td style="width:693px;"> <p>content_script.js有一些限制：</p> 
    <ul> 
     <li>除了以下 API可以调用，其他&nbsp;chrome.* API都不能调用： 
      <ul> 
       <li><a href="https://chajian.baidu.com/developer/extensions/extension.html" rel="nofollow">extension</a>（<a href="https://chajian.baidu.com/developer/extensions/extension.html#method-getURL" rel="nofollow">getURL</a>、<a href="https://chajian.baidu.com/developer/extensions/extension.html#property-inIncognitoContext" rel="nofollow">inIncognitoContext</a>、<a href="https://chajian.baidu.com/developer/extensions/extension.html#property-lastError" rel="nofollow">lastError</a>、<a href="https://chajian.baidu.com/developer/extensions/extension.html#event-onRequest" rel="nofollow">onRequest</a>、<a href="https://chajian.baidu.com/developer/extensions/extension.html#method-sendRequest" rel="nofollow">sendRequest</a>）</li> 
       <li><a href="https://chajian.baidu.com/developer/extensions/i18n.html" rel="nofollow">i18n</a></li> 
       <li><a href="https://chajian.baidu.com/developer/extensions/runtime.html" rel="nofollow">runtime</a>（<a href="https://chajian.baidu.com/developer/extensions/runtime.html#method-connect" rel="nofollow">connect</a>、<a href="https://chajian.baidu.com/developer/extensions/runtime.html#method-getManifest" rel="nofollow">getManifest</a>、<a href="https://chajian.baidu.com/developer/extensions/runtime.html#method-getURL" rel="nofollow">getURL</a>、<a href="https://chajian.baidu.com/developer/extensions/runtime.html#property-id" rel="nofollow">id</a>、<a href="https://chajian.baidu.com/developer/extensions/runtime.html#event-onConnect" rel="nofollow">onConnect</a>、<a href="https://chajian.baidu.com/developer/extensions/runtime.html#event-onMessage" rel="nofollow">onMessage</a>、<a href="https://chajian.baidu.com/developer/extensions/runtime.html#method-sendMessage" rel="nofollow">sendMessage</a>）</li> 
       <li><a href="https://chajian.baidu.com/developer/extensions/storage.html" rel="nofollow">storage</a></li> 
      </ul></li> 
     <li>不能使用所属应用页面中定义的变量或函数</li> 
     <li>不能使用网页或其他内容脚本中定义的变量或函数</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="width:156px;">&nbsp;</td> 
   <td style="width:693px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

####  ####

#### 1、Chrome扩展文件位置 ####

Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，一般会下载到目录C:\\Users\\用户名\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions 下图中是“Postman”扩展目录的截图：

![20190813155215617.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70][]

可以看见：一个 Chrome扩展是一个配置（入口）文件 manifest.json 和一系列 html、css、js、图片文件的集合，然后将代码使用Chrome打包成crx文件。

#### 2、chrome调试和打包（假设已创建好项目） ####

打开浏览器右上角设置图标 > 更多工具 > 扩展程序

加载扩展项目后，浏览器右上角就出现我们的插件了，可以进行测试了，如果修改了代码，点击“重新加载(Ctrl + R)” 后可重新测试。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1][]

项目开发完成后，需打包成 .crx 插件包。

步骤：勾选开发者模式 → 点击“打包扩展程序” → 选择扩展程序根目录 → 确定打包 → 打开电脑中扩展程序根目录文件夹，将里面刚刚打包生成的crx文件拖到 Chrome扩展程序页面中，即可完成安装。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 4][]

#### 3、调试background.js ####

点击背景页，在控制台打印出chrome的详细信息：console.log('chrome', chrome);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 5][]

[20190813155215617.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/95d796b6e817407da2d38d144fc11782.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/762f5583472e4d2da93975776c7ef9c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/67980b2207b043349e3b705a23cb7c6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/621e7a5241d4472686c512ddd5b81340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8807501ceb414393b1002d01ad127869.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/36aab16d71ae463b9d899a2200a7ecd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b6fb592a53814e23befb0156716907bb.png