Question

我正在尝试制作一个将在tumblr.com/dashboard上运行的扩展程序，它将隐藏任何“促销”的div（即我不遵循的博客，这不是付费促销）

我在hidestuff.js

中有以下代码

$(document).ready(function() {
var hide = $( "div:has(.post_dismiss)" );
for (var i = 0; i < hide.length; i++) {
  var div = hide[i].getAttribute('id');
  var id = "#"+div;
  $(id).hide();
}
});

以下是我在manifest.json

中的内容

{
  "manifest_version": 2,
  "name": "I'm Not Following You",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "https://tumblr.com/dashboard", "http://tumblr.com/dashboard"
      ],
      "js": ["hidestuff.js"]
    }
  ]
}

Tumblr使用jQuery，因此我没有包含副本。

我测试了代码（通过从我的Tumblr仪表板复制DOM，其中包括我试图隐藏的div）并且测试工作正常。但是，将其添加到Chrome无法正常工作。

这是我第一次尝试进行扩展，我遵循了一个简单的教程。它可能已经过时了，但教程上没有日期，但我不知道我哪里出错了。

Answer 1

更新matches中的manifest.json字段，因为"https://tumblr.com/dashboard"与"https://www.tumblr.com/dashboard"不匹配
使用您自己的jquery。 Chrome扩展程序无权访问页面创建的任何JavaScript变量或函数。

所以最终的版本是：

的manifest.json

{
    "manifest_version": 2,
    "name": "I'm Not Following You",
    "version": "0.1",
    "content_scripts": [
        {
            "matches": [
                "https://www.tumblr.com/dashboard",
                "http://www.tumblr.com/dashboard"
            ],
            "js": [
                "jquery.js",
                "hidestuff.js"
            ]
        }
    ]
}

hidestuff.js

$(document).ready(function () {
    var hide = $("div:has(.post_dismiss)");
    for (var i = 0; i < hide.length; i++) {
        var div = hide[i].getAttribute('id');
        var id = "#" + div;
        $(id).hide();
    }
});

Answer 2

内容脚本不在与页面上的脚本相同的上下文中运行。您需要在包中和内容脚本清单部分中包含要使用的每个库。

https://developer.chrome.com/extensions/content_scripts#execution-environment

无法让Chrome扩展程序在网页上运行Javascript

2 个答案: