facebook - 无法弄清楚如何在 Facebook 新闻源中为 Chome 扩展选择项目

Question

我正在开发一个 Chrome 扩展程序，该扩展程序在 Facebook 新闻源中的每个项目上插入一个按钮。我首先使用 Tampermonkey 安装一个脚本，该脚本在每个 Youtube 页面的订阅视频旁边安装一个按钮（chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/ask.html?aid=994ff494-1242-452f-a334-1bd616e18bb6），其中工作正常。

然后我尝试对其进行修改，使其作用于 Facebook 新闻源，而不是 Youtube 订阅按钮。我将 // 匹配项更改为转到 facebook.com 并将其定位到 class='_3vuz' 之后，即包含“like”按钮的 Facebook div。但是当我访问 Facebook 时，什么也没有发生；没有按钮出现。

这是我的 Tampermonkey 代码。非常感谢！

    // ==UserScript==
    // @name         Facebook Fake News Button
    // @namespace    https://www.youtubeinmp3.com
    // @version      1.2.2
    // @description  Adds a button to show you whether a Facebook article is true
    // @author       Ilana
    // @match        https://www.facebook.com/*
    // @run-at       document-end
    // ==/UserScript==

    function polymerInject(){

        /* Create button */
        var buttonDiv = document.createElement("div");
        buttonDiv.style.width = "100%";
        buttonDiv.id = "parentButton";

        var addButton = document.createElement("button");
        addButton.appendChild(document.createTextNode("Fake News"));

        if(typeof(document.getElementById("iframeDownloadButton")) != 'undefined' && document.getElementById("iframeDownloadButton") !== null){

            document.getElementById("iframeDownloadButton").remove();

        }

        addButton.style.width = "100%";
        addButton.style.backgroundColor = "#181717";
        addButton.style.color = "white";
        addButton.style.textAlign = "center";
        addButton.style.padding = "10px 0";
        addButton.style.marginTop = "5px";
        addButton.style.fontSize = "14px";
        addButton.style.border = "0";
        addButton.style.cursor = "pointer";
        addButton.style.borderRadius = "2px";
        addButton.style.fontFamily = "Roboto, Arial, sans-serif";

        addButton.onclick = function () {

            this.remove();

            /* Add large button on click */
            var addIframe = document.createElement("iframe");
            addIframe.src = '//www.convertmp3.io/widget/button/?color=ba1717&video=' + window.location.href;

            addIframe.style.width = "100%";
            addIframe.style.border = "none";
            addIframe.style.height = "60px";
            addIframe.style.marginTop = "10px";
            addIframe.style.overflow = "hidden";
            addIframe.scrolling = "no";
            addIframe.id = "iframeDownloadButton";

            var targetElement = document.querySelectorAll("[id='meta']");

            for(var i = 0; i < targetElement.length; i++){

                if(targetElement[i].className.indexOf("ytd-watch") > -1){

                    targetElement[i].insertBefore(addIframe, targetElement[i].childNodes[0]);

                }

            }

        };

        buttonDiv.appendChild(addButton);

        /* Find and add to target */
        var targetElement = document.querySelectorAll("[class='_3vuz']");


        for(var i = 0; i < targetElement.length; i++){

            if(targetElement[i].className.indexOf("ytd-video-secondary-info-renderer") > -1){

                targetElement[i].appendChild(buttonDiv);

            }

        }

        /* Fix hidden description bug */
        var descriptionBox = document.querySelectorAll("ytd-video-secondary-info-renderer");
        if(descriptionBox[0].className.indexOf("loading") > -1){

            descriptionBox[0].classList.remove("loading");

        }

    }

    function standardInject() {
        var pagecontainer=document.getElementById('page-container');
        if (!pagecontainer) return;
        if (/^https?:\/\/www\.facebook.com\/watch\?/.test(window.location.href)) run();
        var isAjax=/class[\w\s"'-=]+spf\-link/.test(pagecontainer.innerHTML);
        var logocontainer=document.getElementById('logo-container');
        if (logocontainer && !isAjax) { // fix for blocked videos
            isAjax=(' '+logocontainer.className+' ').indexOf(' spf-link ')>=0;
        }
        var content=document.getElementById('content');
        if (isAjax && content) { // Ajax UI
            var mo=window.MutationObserver||window.WebKitMutationObserver;
            if(typeof mo!=='undefined') {
                var observer=new mo(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if(mutation.addedNodes!==null) {
                            for (var i=0; i<mutation.addedNodes.length; i++) {
                                if (mutation.addedNodes[i].id=='watch7-container' ||
                                    mutation.addedNodes[i].id=='watch7-main-container') { // old value: movie_player
                                    run();
                                    break;
                                }
                            }
                        }
                    });
                });
                observer.observe(content, {childList: true, subtree: true}); // old value: pagecontainer
            } else { // MutationObserver fallback for old browsers
                pagecontainer.addEventListener('DOMNodeInserted', onNodeInserted, false);
            }
        }
    }

    function onNodeInserted(e) {
        if (e && e.target && (e.target.id=='watch7-container' ||
                              e.target.id=='watch7-main-container')) { // old value: movie_player
            run();
        }
    }

    function finalButton(){

        var buttonIframeDownload = document.createElement("iframe");
        buttonIframeDownload.src = '//www.convertmp3.io/widget/button/?color=ba1717&amp;video=' + window.location.href;
        buttonIframeDownload.id = "buttonIframe";

        buttonIframeDownload.style.width = "100%";
        buttonIframeDownload.style.height = "60px";
        buttonIframeDownload.style.paddingTop = "20px";
        buttonIframeDownload.style.paddingBottom = "20px";
        buttonIframeDownload.style.overflow = "hidden";
        buttonIframeDownload.scrolling = "no";

        document.getElementById("watch-header").appendChild(buttonIframeDownload);

    }

    function run(){

        if(!document.getElementById("parentButton") && window.location.href.substring(0, 25).indexOf("facebook.com") > -1 && window.location.href.indexOf("watch?") > -1){

            var parentButton = document.createElement("div");

            parentButton.className = "yt-uix-button yt-uix-button-default";
            parentButton.id = "parentButton";

            parentButton.style.height = "23px";
            parentButton.style.marginLeft = "28px";
            parentButton.style.paddingBottom = "1px";

            parentButton.onclick = function () {

                this.remove();
                finalButton();

            };

            document.getElementById("watch7-user-header").appendChild(parentButton);

            var childButton = document.createElement("span");
            childButton.appendChild(document.createTextNode("Download MP3"));
            childButton.className = "yt-uix-button-content";

            childButton.style.lineHeight = "25px";
            childButton.style.fontSize = "12px";

            parentButton.appendChild(childButton);

        }

    }

    if(document.getElementById("polymer-app") || document.getElementById("masthead") || window.Polymer){

        setInterval(function(){

            if(window.location.href.indexOf("watch?v=") < 0){

                return false;

            }

            if(document.getElementById("count") && document.getElementById("parentButton") === null){

                polymerInject();


            }

        }, 100);

    }

    else{

        standardInject();

    }

标签： facebookgoogle-chrome-extensiontampermonkey