Question

我正在编写chrome扩展程序 - 使用内容脚本。

基本上，我在另一个网页div中插入DOM并在其中插入自定义内容。需要使这个div可滚动，并尝试使滚动条看起来比默认值更好。

插入div后，运行以下代码以添加jScrollPane。

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

someFrame是网页上已存在ID的{{1}}＆amp; iframe是我已应用于my-scroll-pane插入的div的CSS类。

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

manifest.json

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

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

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

Answer 1

回复你的上一条评论：

它无法正常工作，因为您仍然可以从父页面执行所有操作。您需要将所有内容脚本注入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_script.js ：

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

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

1 个答案: