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

Question

我发现这个用户在谷歌浏览器中运行.

我希望将其用作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扩展程序.

Google Chrome扩展程序教程非常难以理解并让我呕吐 - 我不知道是谁制作的!

Answer 1

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

迈向"完全成熟"的扩展:

1. 首先组织您的脚本,源文件并显式创建manifest.json,如此答案中所示.

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

3. 阅读的内容脚本页面,并注意清单如何可以用来轻松地添加CSS,jQuery的,你userscript(AKA内容脚本),等等.

4. 内容脚本是Chrome扩展程序可用的3种主要工具之一.另外2个是后台页面和UI页面.了解有关扩展开发概述的更多信息.

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