代码之家  ›  专栏  ›  技术社区  ›  Shiveta Pandita

如何用我在userscripts.org上找到的代码编译谷歌Chrome扩展?

  •  6
  • Shiveta Pandita  · 技术社区  · 13 年前

    我偶然发现 this userscript 它在谷歌Chrome浏览器中运行。

    我想把它用作谷歌Chrome扩展,因为这将给我将许多其他代码从用户脚本转换为谷歌Chrome扩展的经验。

    有人能给我一个循序渐进的教程,告诉我如何用 this userscript code ?

    // ==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上原生运行。我这样做是为了学习如何制作谷歌Chrome扩展。

    The Google Chrome extension tutorial 非常不利于理解,让我呕吐——我不知道是谁做的!

    1 回复  |  直到 13 年前
        1
  •  12
  •   Community Mohan Dere    9 年前

    在Google Chrome中,用户脚本 扩展。脚本被打包为 content script ,以及扩展 manifest.json 自动生成。

    要实现“全面”扩展:

    1. 首先组织脚本、源文件并显式创建 宣言.json 如中所示 this answer

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

    3. 阅读 the Content Scripts page 并注意如何使用清单轻松添加CSS、jQuery、用户脚本(AKA内容脚本)等。

    4. 内容脚本 是Chrome扩展可用的3个主要工具之一。另外两个是 背景页 UI页面 。了解更多以开头的内容 the extension-development Overview

    5. 最后,您可以将扩展打包,如中所述 this answer