相关疑难解决方法(0)

任何人都可以向我解释这个.我正在尝试使用带有Google扩展的content_script将CSS文件注入网页,但我的css文件永远不会添加到网页中.有人能告诉我我做错了什么并帮我解决了吗？谢谢

表现:

{
  "name": "Extension",
  "version": "0",
  "description": "",


  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
    "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "css": ["myStyles.css"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ]
}

myStyles.css

#test {
    margin: 0 10px;
    background: #fff;
    padding: 3px;
    color: #000;
}

作为参考，为了在 Chrome 扩展中读取剪贴板文本，您必须：

• 在清单中请求“clipboardRead”权限
• 创建一个后台脚本，因为只有后台脚本可以访问剪贴板
• 在背景页面中创建一个元素以接受剪贴板粘贴操作。如果将其设为文本区域，您将获得纯文本，如果将其设为 contentEditable=true 的 div，您将获得格式化 HTML
• 如果要将剪贴板数据传递回页面内脚本，则需要使用消息传递 API

但这仅适用于manifest_version 2，因为在manifest_version 3中你不能有后台脚本，而是有一个服务工作者。

在这个服务工作者中你不能拥有正常的功能，所以我有一个

chrome.runtime.onMessage.addListener

例如，在此“manifest_version 3 服务工作线程 background.js 脚本”中，我从 popup.html 调用一条消息。

但问题是这个服务人员没有“文档”，所以我无法创建文本区域来执行复制内容并调用 document.execCommand 的技巧。

那么...有什么方法可以将 Manifest Version 3 中的内容复制到剪贴板吗？

我无法让JavaScript在我正在定义的Shadow DOM元素中正常运行.给出以下代码:

<template id='testTemplate'>
 <div id='test'>Click to say hi</div>
 <script>
  var elem = document.querySelector('#test');
  elem.addEventListener('click', function(e) {
     alert("Hi there");
  });
</script>
</template>

<div id="testElement">Host text</div>

<script>
  var shadow = document.querySelector('#testElement').createShadowRoot();
  var template = document.querySelector('#testTemplate');
  shadow.appendChild(template.content.cloneNode(true));
</script>

document.querySelector返回null.如果我将它包装在document.onload中它不再抛出错误,但是单击div也不会启动警报.

1. 在这种情况下,当我的代码运行时,document.onload是否正确处理？
2. 这是为阴影dom元素嵌入javascript的正确方法吗？

我有一个 Chrome 扩展程序，它将 DIV 注入每个页面，并使用扩展程序中包含的样式表为 DIV 设置样式。在某些页面上，注入的 DIV 看起来像预期的那样，但在其他页面上则不然。例如，在 StackOverflow 站点中，box-shadow我的元素的属性被覆盖，尽管它是! important在我的 CSS 中指定的。

当我检查有问题的元素时，Chrome 告诉我该box-shadow属性未应用（显示为删除线），但它没有告诉我原因：样式级联中没有任何内容指定该属性。

当我将box-shadow属性直接添加到元素（没有 CSS 类的好处）时，CSS 检查器视图显示属性与元素相关联，但效果仍然不存在。

更新：代码片段：

这是我在代码中指定的内容：

    var $bar = $('<div>').addClass('pp_bar').css({
        'box-shadow': '-1px 0px 2px 1px #444',
        '-moz-box-shadow': '-1px 0px 2px 1px #444',
        '-webkit-box-shadow': '-1px 0px 2px 1px #444'
    });

这是CSS：

.pp_bar {
    height: 80%;
    right: -4px;
    top: 0px;
    position: absolute;
    box-shadow: -1px 0px 2px 1px #444 ! important;
    -webkit-box-shadow: -1px 1px 2px 1px #444 ! …

我读过的所有内容都表明Shadow Dom从其父页面CSS开始是“安全的”。IE浏览器，如果我将所有div样式设置为紫色字体：

<style>
  div{color: purple}
</style>

我的Shadow Dom中的div应该具有浏览器的默认颜色。

我正在写一个chrome扩展名，它将html注入任何给定的页面。除非此html受Shadow Dom或Iframe保护，否则它将继承所有页面的CSS。

建议解决这个问题，这个问题，是使用暗影大教堂。因此，我实现了一个解决方案，但注意到它仍在继承页面的CSS。我以为这可能是在Chrome扩展程序中使用它时遇到的一个问题，所以我从一些Shadow Dom示例中劫持了jsBin（并把它扔到了另一个在线编码应用中以作很好的衡量）。

https://codepen.io/hyrumwhite/pen/xPRexQ

结果相同。我的影子DOM继承了页面CSS，我的div（奇怪的是我的h1）是紫色的。

似乎Shadow Dom中的子代将继承应用于host元素的任何样式。

这是按设计工作的吗？有办法防止这种情况吗？还是影子DOM足够新，以至于这是一个bug，我应该期待使用它时会遇到类似的bug？