Question

我遇到了this userscript，可以在谷歌浏览器中使用。

我想将其用作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

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

迈向“完全成熟”的扩展：

首先整理您的脚本，源文件并明确创建manifest.json，如this answer所示。
此时您无需更改该用户脚本的代码，但您需要将@include和@run-at指令的值传输到manifest.json文件你会产生的。请参阅该链接答案中的示例。
阅读the Content Scripts page并注意如何使用清单轻松添加CSS，jQuery，您的用户脚本（AKA内容脚本）等。
内容脚本是Chrome扩展程序可用的3种主要工具之一。另外2个是后台页面和 UI页面。详细了解以the extension-development Overview开头的内容。
最后，您可以按照this answer中的说明打包您的扩展程序。

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

1 个答案: