chrome 插件开发问题记录

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配置

相关推荐
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121388 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴9 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript