使用Shadow DOM注入文件解决content.js注入的文件被其他页面的样式修改的问题

🕒 Published at:

创建 shadow-root 的 dom

javascript

// 创建 shadow-root 的 dom
let shadowRootDom = document.createElement('div');
shadowRootDom.setAttribute('id', 'shadow-root');
document.body.appendChild(shadowRootDom);
const shadow = document.querySelector('#shadow-root').attachShadow({mode: 'open'});

在 shadow-root 插入 `<div id="chrome-extension-root"></div>` 方便 vue 去挂载

javascript

// 在 shadow-root 插入 `<div id="chrome-extension-root"></div>` 方便vue去挂载
let chromeExtensionRootDom = document.createElement('div');
chromeExtensionRootDom.setAttribute('id', 'chrome-extension-root');
shadow.appendChild(chromeExtensionRootDom);
let getChromeExtensionRootDom = shadow.querySelector('#chrome-extension-root');

使用 vue 挂载

javascript

// 使用vue挂载
new Vue({
  el: getChromeExtensionRootDom,
  render: (h) => h(root),
});