1、回填input值需要调用一下目标元素事件
ini
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属性
xml
<Button type='link' target='_blank' href={innerItem.url}>{innerItem.env}</Button>
3、避免插件注入网页样式导致网页错乱
manifest.json
js
{
"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,组件的「事件处理、组件渲染更新」等行为在两个版中都是一致的。
js
npm i shadow-view --save
基于react的项目配置
js
// 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配置