【谷歌插件】谷歌插件制作

港控/mmm° 2022-09-09 09:52 412阅读 0赞

### 文章目录 ###

*  谷歌浏览器插件制作
 *   *  教程
     *  实现步骤
     *  成功示例
     *  问题
     *   *  未封装的扩展程序
         *  并非来自 Chrome 网上应用商店

# 谷歌浏览器插件制作 #

## 教程 ##

教程1：[https://blog.csdn.net/github\_35631540/article/details/89845684][https_blog.csdn.net_github_35631540_article_details_89845684]  
教程2：[https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html][https_www.cnblogs.com_liuxianan_p_chrome-plugin-develop.html]  
示例：[https://gitee.com/xueyedangkong/my-plugin.git][https_gitee.com_xueyedangkong_my-plugin.git] 我自己按教程做的一个示例  
更多配置：[http://blog.haoji.me/chrome-plugin-develop.html\#webRequest][http_blog.haoji.me_chrome-plugin-develop.html_webRequest]

## 实现步骤 ##

*  添加Json文件：manifest.json

{ 
      "manifest_version": 2,
      "name": "PoetryTab",
      "version": "1.0",
      "description": "PoetryTab:为你的浏览增加诗意",
      "author": "Fizz",
      "icons": { 
        "16": "img/cadillac.png",
        "48": "img/cadillac.png",
        "128": "img/cadillac.png"
      },
      "chrome_url_overrides": { 
        "newtab": "PoetryTab.html"
      }
    }

*  添加html文件

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"/>
    	<title>五行缺诗</title>
    </head>
    <body>五行缺诗</body>
    </html>

*  在浏览器访问：chrome中访问 chrome://extensions/  
    然后加载已解压的扩展程序，选中文件夹根目录即可。  
    然后打开新标签页，即可看到效果

## 成功示例 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16]

## 问题 ##

### 未封装的扩展程序 ###

在浏览器把自己写的插件加载以后，在程序左上角，会显示这个信息  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16 1]  
解决办法：点击详情，然后点击左上角`打包扩展程序`，选中文件夹根目录，不用输入秘钥，点击确定，即可生成`.crx`文件。然后把现在的扩展程序移除，再把新生成的crx文件拖入进来，即可。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_20_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16 3]

### 并非来自 Chrome 网上应用商店 ###

个人插件注册到谷歌网上应用商店：[https://www.cnplugins.com/tool/publish-chrome-plugins.html][https_www.cnplugins.com_tool_publish-chrome-plugins.html]  
谷歌网上应用商店：[https://chrome.google.com/webstore/category/extensions][https_chrome.google.com_webstore_category_extensions]

[https_blog.csdn.net_github_35631540_article_details_89845684]: https://blog.csdn.net/github_35631540/article/details/89845684
[https_www.cnblogs.com_liuxianan_p_chrome-plugin-develop.html]: https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
[https_gitee.com_xueyedangkong_my-plugin.git]: https://gitee.com/xueyedangkong/my-plugin.git
[http_blog.haoji.me_chrome-plugin-develop.html_webRequest]: http://blog.haoji.me/chrome-plugin-develop.html#webRequest
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/53f9938d409c47d595bedeb6b58a8b00.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/5bab38871fef420da425e468863b9b0a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f7ad1e0a1bfc4e70ae976c63d63055cd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/8900bab83d1f4f66a47fd5a3bb205ef8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/a8709854269147e1974d4a08bb3b3609.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_10_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/8c635572d5714505b14483449aed5d1d.png
[https_www.cnplugins.com_tool_publish-chrome-plugins.html]: https://www.cnplugins.com/tool/publish-chrome-plugins.html
[https_chrome.google.com_webstore_category_extensions]: https://chrome.google.com/webstore/category/extensions