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

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法