ブラウザ拡張機能 Stylus で、Google のポップアップなどを非表示にする

## この記事の目的

この記事では、オープンソースのブラウザ拡張機能 [Stylus](https://github.com/openstyles/stylus) で Google のポップアップなどを非表示にする方法を説明します。🎉

👉 [AdGuard](https://adguard.com/ja/adguard-browser-extension/overview.html) では対応できないものを対象にしています。

## Stylus のインストール方法

Stylus は以下のリンクからインストールできます。

https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

https://addons.mozilla.org/ja/firefox/addon/styl-us/

詳しいインストール方法については、以下の[小技チョコレートさんのページ](https://ich.hatenadiary.com/entry/browser-extension-stylus)を参考にしてください。

https://ich.hatenadiary.com/entry/browser-extension-stylus

👉 [Microsoft Edge](https://www.microsoft.com/ja-jp/edge) や [Arc browser](https://arc.net/) の場合は、上記ページの [Chrome 系ブラウザへのインストール](https://ich.hatenadiary.com/entry/browser-extension-stylus#Chrome%E7%B3%BB%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%B8%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参照してください。

## サンプル (閲覧時)

### 1. 「Google でログイン」(`Sign in with Google`) を非表示にする

```css
#credential_picker_container:has(iframe[src*="accounts.google.com"]) {
  display: none;
}
```

![Block Sign-in-with-Google](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/4bffa3c6-db62-9605-a9a6-3509b9ab50c9.png)

![Use-your-Google-Account-to-sign-in-to-Medium](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/fa412f22-eddd-98c9-c4ff-1b5cea9f68eb.png)

![Use-your-Google-Account-to-sign-in-to-StackExchange](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/310a868b-3c8f-6fb9-688c-39866bb6e9ba.png)

### 2. 「Google にログイン」(`Sign in to Google`) 「Chrome に切り替えませんか」(`Google recommends using Chrome`)を非表示にする

```css
div[aria-hidden="false"]:has(iframe[src*="google.com"]) {
  display: none !important;
}
div[role="dialog"][aria-labelledby="promo-header"] aside {
  display: none !important;
}
```

![Block Google popups](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/7f531420-4c5a-d05a-6453-e1414980bae1.png)

![Sign-in-to-Google](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/07503c70-05b8-f27f-cf06-caa245fbabea.png)

![Switch-to-Chrome](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/5d8fd1e1-2cbf-7164-5857-b0812440e3da.png)

### 3. [Stack Exchange](https://stackexchange.com/) / [Stack Overflow](https://stackoverflow.com/) / [Super User](https://superuser.com/) / [Server Fault](https://serverfault.com/) / [Ask Ubuntu](https://askubuntu.com/) の cookie に関するポップアップを非表示にする

正規表現に一致する URL (`URLs matching the regexp`):  
👉 `^https?://.*(askubuntu|serverfault|stackexchange|stackoverflow|superuser)\.com(/.*)?$`

```css
#onetrust-consent-sdk {
  display: none !important;
}
```

![Block StackExchange](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/12856f1b-cea1-872f-8b66-e1ebdc5df1a3.png)

![StackExchange-cookie](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/611dd5f9-1968-1409-2eb3-88168f551175.png)

### 4. [Agoda](https://agoda.com/) のポップアップを非表示にする

```css
[data-element-name="prominent-app-download-popover"] {
  display: none !important;
}
```

![Block Agoda.com](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/2a847e3d-d23e-9602-8950-bd2771e2947a.png)

![Agoda-app](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/719cec8c-297a-7289-2d4d-51b70d51b21b.png)

### 5. [Qiita](https://qiita.com/) のポップアップを非表示にする

```css
[data-testid*="popup"] {
  display: none !important;
}
```

![Block Qiita](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/9f5d05c9-83f1-53ea-45fa-74ce9623ea3c.png)

### 6. Windows 環境での [BBC](https://www.bbc.com) のフォントを MS ゴシックから変更する

```css
@font-face {
  font-family: "MS PGothic";
  src: local("system-ui");
}

@font-face {
  font-family: "MS UI Gothic";
  src: local("system-ui");
}
```

![modern BBC](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/dbadc994-6d8a-cf66-d085-20e2a883bc51.png)

今回の設定が適用される前と後での [BBC](https://www.bbc.com/japanese/video-46340743) の表示は以下の通り。

![jagged fonts at BBC](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/879fa15b-0c7d-706f-dd94-3cdab6f15d4f.png)  
![smooth fonts at BBC](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/fd49e966-aac9-b84f-0ea4-dc0845cb4150.png)

2024 年 10 月時点での BBC のフォント指定は以下のようになっています。  
`font-family:"Hiragino Kaku Gothic Pro","ﾋﾗギﾉ角ゴPro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif`

## サンプル (印刷時)

### 1. [Impress Watch](https://www.watch.impress.co.jp/) のヘッダーを印刷時に非表示にする

**2024/10/01 追記**:  
👉 コードが修正されたのか、以下の設定を行わなくてもヘッダーは印刷されなくなりました。

```css
@media print {
  header section {
    display: none !important;
  }
}
```

### 2. [ダイヤモンド・オンライン](https://diamond.jp/)のヘッダーを印刷時に非表示にする

```css
@media print {
  #site-header {
    display: none !important;
  }
}
```

### 3. [現代ビジネス](https://gendai.media/)のヘッダーを印刷時に非表示にする

**2024/10/01 追記**:  
👉 コードが修正されたのか、以下の設定を行わなくてもヘッダーは印刷されなくなりました。

```css
@media print {
  #id-nav {
    display: none !important;
  }
}
```

### 4. [マイナビニュース](https://news.mynavi.jp/) を Firefox でも正常に印刷できるようにする

現時点で対応方法はありません。😱😱

表示は正常にできているのに、なぜ印刷時はレイアウトもフォント(の見栄え)も破壊されるのか不明です。

## 補足説明

### 1. `!important` の要否

`display: none !important;` の `!important` はスタイルシートの優先度を上げるための設定です。🎉

`!important` が無くても動作するなら省略してしまって構いません。

### 2. 末尾の空白行の要否

末尾の空白行(改行のみの行)はあってもなくても動作します。

この記事からコードをコピーすると末尾の空白行が発生しないので、「改行が必要？:thinking:」といった混乱を回避するため、スクリーンショットでは末尾の空白行を入れていません。

### 3. ブラウザ間での同期

ブラウザ間・端末間で、Stylus の設定を同期させたい場合は、「クラウドとの同期」機能が使えます。  
使用できるクラウドストレージは、Dropbox, OneDrive, Google Drive, WebDAV です。