6

我遇到了这个在谷歌浏览器中工作的用户脚本。

我想将它用作 Google Chrome 扩展，因为这将使我有经验将许多其他代码从用户脚本转换为 Google Chrome 扩展。

有人可以给我一个关于如何使用这个用户脚本代码制作 Google Chrome 扩展的分步教程吗？

// ==UserScript==
// @name           Facebook Ads Hider
// @author         Jose Luis Martin
// @namespace      http://joseluismartin.info
// @description    Hide Ads on Facebook
// @include        http://www.facebook.com/*
// @run-at         document-start
// 
// ==/UserScript==

if (document.addEventListener) {
    document.addEventListener("DOMNodeInserted", onNodeInserted, false);
}

// Event listener to hide ads containers
function onNodeInserted(event) {
    target = event.target;
    if (target.className == "ego_column") {
        hideElement(target);
    }
}

// trivial hide of ads container
function hideElement(elto) {
    elto.style.visibility = "hidden";
    elto.style.hight = "0px";
    elto.style.width = "0px";
}

请不要回复说不需要这样做，因为用户脚本可以在 Google Chrome 上本地运行。我这样做是为了学习如何制作 Google Chrome 扩展程序。

谷歌浏览器扩展教程非常不好理解，让我呕吐——我不知道是谁做的！

4

1 回答 1

12

在 Google Chrome 中，用户脚本是扩展程序。该脚本被打包为内容脚本，并且扩展manifest.json自动生成。

迈向“成熟”的扩展：

  1. 首先组织您的脚本、源文件并明确创建，manifest.json如本答案所示。

  2. 此时您不需要更改该用户脚本的代码，但您需要将@includeand@run-at指令的值传输到manifest.json您将生成的文件中。请参阅该链接答案中的示例。

  3. 阅读内容脚本页面并注意如何使用清单轻松添加 CSS、jQuery、您的用户脚本（AKA 内容脚本）等。

  4. 内容脚本是 Chrome 扩展可用的 3 个主要工具之一。另外 2 个是背景页面和UI 页面。了解更多关于那些从扩展开发概述开始的信息。

  5. 最后，您可以按照此答案中的说明打包您的扩展程序。

于 2012-09-12T12:50:01.513 回答