Jquery 在内容脚本中的Chrome扩展中使用jScrollPane

我正在编写一个chrome扩展——使用内容脚本

$('#someFrame').contents().find('head').append("<link id='my_css_jscrollpane' href='" + chrome.extension.getURL("css/jscrollpane.css") + "' type='text/css' rel='stylesheet' />");

基本上，我在另一个网页的

DOM

中插入

div

，并在其中插入自定义内容。需要使此

div

可滚动，我正在尝试使滚动条看起来比默认的更好

插入

div

后，运行以下代码添加

jScrollPane

$('#someFrame').contents().find('[class="my-scroll-pane"]').jScrollPane();

someFrame

是网页上已经存在的

iframe

的

ID

，

my scroll pane

是一个CSS类，我已经应用于插入

iframe

的

div

在

manifest.json

文件中，我包含了以下内容：

"css": ["css/jscrollpane.css"],
"js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ]

没用。也没有抛出javascript错误。 我怀疑CSS是否不是主页DOM的一部分是问题所在。因此，在内容脚本中尝试了以下破解

$('#someFrame').contents().find('head').append("<link id='my_css_jscrollpane' href='" + chrome.extension.getURL("css/jscrollpane.css") + "' type='text/css' rel='stylesheet' />");

$（'someFrame'）.contents（）.find（'head'）.append（“”）；

---

没用。同样，没有抛出错误。我确认链接标签已正确插入头部部分。请指导正确的解决方法。

回应您的最后评论：

---

它不起作用，因为您仍然在从父页面执行所有操作。您需要将所有内容脚本注入到iframe中，并在iframe中执行所有操作，而不是从父页面执行

您无法从父页面访问iframe js，因此当您在父页面上调用

.jScrollPane（）

时，它仍在引用父页面的页面库，即使您同时将其注入父页面和iframe

更新

manifest.json：

"content_scripts": [
    {
      "matches": ["http://iframe.domain.com/*"],
      "css": ["css/jscrollpane.css"],
      "js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ]
    }
  ],

$(".my-scroll-pane").jScrollPane();

我的脚本.js：

"content_scripts": [
    {
      "matches": ["http://iframe.domain.com/*"],
      "css": ["css/jscrollpane.css"],
      "js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ]
    }
  ],

$(".my-scroll-pane").jScrollPane();

---

在哪个脚本中插入此div，以及在哪个脚本中执行

jScrollPane（）

？这是相同的内容脚本吗？我认为你不能像那样操纵iframe内容。您需要将内容脚本注入到该iframe中。这两个操作——插入我的div和调用jScrollPane——都在同一个内容脚本——my_script.js中。插入div后，我可以从同一内容脚本中操作iframe中的任何内容。仅供参考，这是我插入div-$（“#someFrame”）.contents（）的方式。find（'div[id=“someExistingDiv”]'）。after（'my content-我需要使其可滚动'）；您是否将所有这些内容脚本注入iframe（

all_frames

manifest标志）？因为您不能在父页面中使用javascript并期望它影响iframe。我只是将所有这些脚本注入iframe，然后在iframe内部执行所有操作，而不是从父页面。我只是想澄清一下，如果将

jquery.jscrollpane.js

注入父页面而不是iframe，那么它在iframe内部将无法访问。“您需要将所有内容脚本注入iframe，并在iframe中执行所有操作”-我该怎么做？您能帮我举个例子吗？