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以外へ移動するか、何らかの事情でリロードされるまで有効であるようです。

本日もありがとうございました。

参考