マウスでページ上の要素を選択し、JavaScriptで非表示にするには

Question

私はクロムのテスト拡張を行っています。 私の質問：

マウスで要素を選択して非表示にするイベントスクリプトを作成することはできますか？ Shift+Ctrl+Cを押すと、検査要素選択ツールのようなものです。注：私は後にDOMのリフローを望んでいません。ここで

は私のコードです：

content.js：

var elems = document.getElementsByTagName("iframe"); 

$(document).ready(function() { 
    for (var i = 0, max = elems.length; i < max; i++) { 
     elems[i].hidden = true; 
    }; 
}); 

window.onload = function() { 
    for (var i = 0, max = elems.length; i < max; i++) { 
     elems[i].hidden = true; 
    } 
}; 

$(window).load(function() { 
    for (var i = 0, max = elems.length; i < max; i++) { 
     elems[i].hidden = true; 
    }; 
}); 

for (var i = 0, max = elems.length; i < max; i++) { 
    elems[i].hidden = true; 
}; 

はmanifest.jsonを：

{ 
    "manifest_version":2, 
    "name":"Test", 
    "description":"A Basic program", 
    "version":"0.1", 
    "background":{ 
    "scripts":[ 

    ] 
    }, 
    "content_scripts":[ 
    { 
     "matches":[ 
      "<all_urls>" 
     ], 
     "js":[ 
      "jquery-3.2.1.min.js", 
      "content.js" 
     ] 
    } 
    ], 

    "browser_action":{ 
    "default_title":"Test" 
    } 
} 

Answer 1

要素を選択するためのさまざまな方法の負荷、および負荷があります。もっと隠すために

まず、chrome.contextMenus.createというコンテキストメニュー項目を追加できます。

キーコード（SHFT+CTRL+Cなど）を処理するには、ページに背景スクリプトが必要です。

この場合、DOMを操作して要素を非表示にすることができます。 element.style.display = 'none'を使用してコンテンツを折りたたむか、またはelement.style.opacity = '0'を使用してページの残りの部分を変更しないで非表示にします。

あなたのソースコードを見てみると：

var elems = document.getElementsByTagName("iframe"); 

OKが、これは彼らがにロードされていると仮定して、ページ内のすべてののタグを取得する必要があり、デフォルトではcontent scripts fire after the DOM is complete but can be before or after the onload event。

次は...

$(document).ready(function() { ... 
window.onload = function() { ... 
$(window).load(function() { ... 

これらは、完成した負荷を有する文書にこれをフックするために、異なる試みのように見えます。問題は、window.onloadが既に起動しているかどうかです。 manifest.jsonの中でと"run_at": "document_end"の間でコンテンツスクリプトを実行させることができますが、それはあなたが望むものとは思えません。

インラインスクリプトを使用してDOMから取得した変数elemsがすべて使用されていることに注意してください。イベントが発生する前にが存在しなかった場合は、配列には入りません。

最後に、これらすべてのは、ループに Sをしようとしているように表示されます。

for (var i = 0, max = elems.length; i < max; i++) { 
    elems[i].hidden = true; 
}; 

これは、DOMをリフロー避けるためにelems[i].style.visibility = 'hidden'を使用していますが、大丈夫です。私はあなたの問題は、コンテンツのスクリプトを実行すると、あなたが探している sがページ内にまだないということであると考え

function hideIframes() { 
    const elems = document.getElementsByTagName('iframe'); 
    for (let e of elems) { 
     e.style.visibility = 'hidden'; 
    }; 
} 

// Don't do all of these - pick one that suits your context 
hideIframes(); // Run inline on document_idle 
$(hideIframes); // Run on jQuery complete 
setTimeout(hideIframes, 3000); // Run again in 3s 

：だから（Chromeの拡張機能をサポートしてES6構文を使用）。追加したと思われる特定のイベントに対してチェックを追加する必要があるかもしれません。