用uniapp编译chrome扩展程序（一）

【声明】本文仅作经验分享，非任何性质教学或其他，如有错误欢迎评论区指出 :)

目前进度：编译成h5后嵌入chrome扩展正常显示并运行。

限制及问题：
1、rpx无法识别，目前是手动修改为px；
2、嵌入后网页搜索页无法正常滑动，但不影响图片、咨询、详情页等；
3、仅成功复现app，无交互及网页识别；

由于限制1，编译前需要做出的改动：
1、app.vue文件css设置窗口大小

2、复现限制1步骤

编译后操作步骤：
1、使用HBX编译为h5包

2、手动添加mainfest.json在h5根目录
我的路径是 unpackage\dist\build\h5

manifest.json可参考我的简易版配置，manifest.json配置解析

{  
  "name": "项目名称",  
  "version": "1.0",  
  "manifest_version": 3,  
  "description": "项目描述",  
  "action":  
  {  
      "default_icon": {  
          "64":"static/res/icon/logo.png",  
          "72":"static/logo.png",  
          "144":"static/res/icon/login-logo.png"  
      },  
      "default_popup": "index.html",  
      "default_title":"抬头名称"  
  },  
  "icons": {  
      "64":"static/res/icon/logo.png",  
      "72":"static/logo.png",  
      "144":"static/res/icon/login-logo.png"  
    },  
    "content_scripts":  
    [  
        {  
            "matches": ["<all_urls>"],  
            "css": [""], //你编译出来的css路径  
            "run_at": "document_start"  
        }  
    ]  
}

3、修改index.html文件。
此处主要是由于chrome扩展插件的一些安全性考虑从而不支持内写script。 csp为什么拒绝内联

4、选中根目录添加 chrome扩展

5、成果

到目前为止，项目就在扩展程序上编译使用了。但仍需添加通信等功能，学会后再来分享，下篇见！