google-chrome - 如何用我在userscripts.org上找到的代码编译Google Chrome扩展程序？

Question

我遇到了this userscript(可在Google Chrome浏览器中使用)。

我想将其用作Google Chrome扩展程序，因为这将给我带来将许多其他代码从用户脚本转换为Google Chrome扩展程序的经验。

有人可以给我逐步讲解如何使用this userscript code制作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扩展程序。

The Google Chrome extension tutorial很难理解，让我呕吐-我不知道是谁做的!

Answer 1

在Google Chrome浏览器中，用户脚本是扩展名。该脚本将打包为content script，并且会自动生成扩展名manifest.json。

要迈向“全面发展”的扩展程序，请执行以下操作:

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

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

阅读the Content Scripts page并注意如何使用 list 轻松添加CSS，jQuery，您的用户脚本(AKA内容脚本)等。

内容脚本是Chrome扩展程序可使用的3种主要工具之一。另外2个是背景页面和UI页面。了解有关以the extension-development Overview开头的内容的更多信息。

最后，您可以按照this answer中的说明打包扩展程序。