javascript:(()=>{const e=document.createElement("style");e.innerText='[data-testid="placementTracking"] article{display:none}',document.head.appendChild(e)})();
はじめに
ブラウザ版Twitterを使っています。前回自分が投稿した記事のコードについて検証と改善を重ねた結果、より短くて効率のいいブックマークレットが完成しました。全く別物になっています。いい感じなので紹介します。
コードと解説
上記コードは以下のコードを圧縮したものです。
(
() => {
// ---------
const s = document.createElement('style');
s.innerText = '[data-testid="placementTracking"] article{display:none}';
document.head.appendChild(s);
// ---------
}
)();
ざっと次のような流れになっています。
- style要素を作成。
- ツイッターの広告プロモーションの記事(articleタグ)について、{display:none}というスタイルをあてる。該当する記事には、
data-testid="placementTracking"
というdata-属性が設定されていることから、対象となる要素を[data-testid="placementTracking"] article
としている。 - <style>を、<head>の最後に追加。
data-testid="placementTracking"
はHTMLを解読するとわかる部分。ただし2021年5月現在のものです。予告なく変更される可能性があるのでご注意ください。
まとめ
data-属性とスタイルシートを用いた手法を採用しました。
このブックマークレットは、twitter.com以外へ移動するか、何らかの事情でリロードされるまで有効であるようです。
本日もありがとうございました。
参考