chrome 插件开发问题记录

1、回填input值需要调用一下目标元素事件

let usernameDom = document.getElementsByName('loginName')[0];
let passwordDom = document.getElementsByName('userPassword')[0];
const evt = new Event('input', { bubbles: true });

// 将值填入 dom 输入框里
usernameDom.value = curentOpt.name;
usernameDom.dispatchEvent(evt);
passwordDom.value = curentOpt.pwd;
passwordDom.dispatchEvent(evt); 

2、popup 打开a链接页面需要添加target属性

<Button type='link' target='_blank' href={innerItem.url}>{innerItem.env}</Button>

3、避免插件注入网页样式导致网页错乱

manifest.json

{
  "name": "Account Saver",
  "description" : "账号管理", 
  "version": "1.0", 
  "manifest_version": 2, 
  "icons": { 
    "16": "./images/logo192.png", 
    "48": "./images/logo192.png",
    "96": "./images/logo192.png",
    "128": "./images/logo192.png"
  },
  "browser_action": {
    "default_icon": "./images/logo192.png", 
    "default_title": "账号管理",
    "default_popup":"/index.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "storage",
    "notifications"
  ],
  "background": {
    "persistent": false,
    "scripts": ["/static/js/background.js"]
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "/static/js/content.js"
      ],
      "css": [
        "static/css/content.css"
      ],
      "run_at": "document_idle"
    }
  ]
}

删除配置中的css注入"css": [ "static/css/content.css" ],

使用ShadowView 是一个写好的可开箱即用的面向 React 的 Shadow DOM 容器组件，利用 ShadowView 可以像普通组件一样方便的在 React 应用中创建启用 Shadow DOM 的容器元素。

ShadowView 目前完整兼容支持 React 15/16，组件的「事件处理、组件渲染更新」等行为在两个版中都是一致的。

npm i shadow-view --save

基于react的项目配置

// import './App.css';
import Popup from './popup';
import { ShadowView } from "shadow-view";

function App() {
  return (
    <div className="App">
      {/* <h1>Hello World</h1> */}
      <ShadowView 	
        styleSheets={[	
          '/static/css/main.css',
        ]}	
      >	
      <Popup></Popup>
    </ShadowView>	
    </div>
  );
}

export default App;

需要注意styleSheets的写法以及路径配置，npm官网的插件imports导入方式无效（避坑）

chrome 插件开发可以基于create-react-app创建的项目修改成插件需要的目录结构重点是public下的manifest.json配置