[Chrome拡張]　ポップアップメニューからWebページを操作する方法(スタイル変更)

ポップアップメニューを開いて現在表示中のWebページを操作する方法です。
今回は、cssファイルを使用してページのデザインを変える方法をご紹介します。

ツールバーのアイコンをクリックしてポップアップメニューを表示する方法は、
[[Chrome拡張]　ポップアップメニューを表示する方法](https://qiita.com/doran/items/6684c939c5dc2b9d091a)をご覧ください。

:::note info
新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
[こちらがそのChrome拡張の記事です。ご興味があれば](https://qiita.com/doran/items/8c3ca80de3f149dce0e0)

[こちらは別のChrome拡張の記事です。合わせてどうぞ](https://qiita.com/doran/items/6613ea2d92b330bae2c9)
:::

#### 用意するファイル
```
root/
 　├ manifest.json
 　├ popup.html
 　├ js/
 　│　 ├ popup.js
 　│　 └ jquery-3.5.1.min.js
 　├ css/
 　│　 └ style.css
 　└ img/
 　　  ├ icon32.png
  　　 └ icon48.png
```
#### popup.html
ポップアップメニューのHTMLです。
button#btn1(変える)で用意したcssに変えて、
button#btn2(戻す)で変えたcssを元に戻す操作を行います。
```html
<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/popup.js"></script>
  </head>
  <body>
    <button id="btn1" style="min-width: 160px;">変える</button>
    <button id="btn2" style="min-width: 160px;">戻す</button>
  </body>
</html>
```
#### popup.js
popup.htmlを開いたときにタブIDの取得を行います。
　***chrome.tabs.query***で、現在のウィンドウでアクティブなタブを取得します。

popup.htmlのbutton#btn1(変える)を押したときに実行する処理を記述します。
　***chrome.scripting.insertCSS***で、スタイルシートを埋め込みます。

popup.htmlのbutton#btn2(戻す)を押したときに実行する処理を記述します。
　***chrome.scripting.removeCSS***で、埋め込んだスタイルシートを削除します。
```js
$(function(){
  var _tab_id;
  $(document).on("click","#btn1",function(){
    chrome.scripting.insertCSS({
      target:{tabId: _tab_id},
      files: ["css/style.css"]
    });
  });
  $(document).on("click","#btn2",function(){
    chrome.scripting.removeCSS({
      target:{tabId: _tab_id},
      files: ["css/style.css"]
    });
  });
  chrome.tabs.query({ active: true, currentWindow: true },function(tab){_tab_id=tab[0].id});
});
```
#### style.css
Webページに埋め込むスタイルシートを定義します。
manifest.jsonと同じ階層の「css」フォルダ直下に「style.css」を用意しました。
ここでは、Qiita記事のヘッダ部分の色を指定しています。
```css
.st-NewHeader {
  background-color: #fbb !important;
}
.st-NewHeader_mainNavigation {
  background-color: #fbb !important;
}
```
#### manifest.json
***permissions***に「activeTab」と「scripting」を設定します。
　activeTab：アクティブなタブへのアクセス権限
　scripting：JavaScript、CSSをWebページに挿入する権限
```json
{
  "name": "Webページ操作テスト",
  "version": "1.00",
  "description": "Webページ操作テスト",
  "permissions": ["activeTab","scripting"],
  "action": {
    "default_icon": {
      "32": "images/icon32.png"
    },
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "images/icon48.png"
  },
  "manifest_version": 3
}
```
#### 実行結果
1.ポップアップメニューを開いて「変える」ボタンをクリック。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/9142575a-8d77-613e-c3cb-9a98c1692132.png">
2.ヘッダ部分の色が変わった！。。。
　ポップアップメニューの「戻す」ボタンをクリック。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/2b935b2e-7877-e537-235b-f935d56b44b7.png">
3.元に戻った！
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/eb2f06ae-442b-22d5-f327-876914628ea1.png">
おしまい。。
#### その他のChrome拡張の実装方法
以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[[Chrome拡張]　ツールバーのアイコンをクリックしてHTMLページを表示する方法](https://qiita.com/doran/items/743f687eb413c41432e1)
[[Chrome拡張]　Chrome拡張メニューからページを操作する方法](https://qiita.com/doran/items/9203789b570632e2456e)
[[Chrome拡張]　Webページ(content scripts)からChrome拡張画面へメッセージを送る方法](https://qiita.com/doran/items/faf21f816b168606cfbe)
[[Chrome拡張]　Chrome拡張画面でタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/c2c5c225691fd423b2e6)
[[Chrome拡張]　Content Scriptsでタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/2620b2c8f2ac2c5548b6)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法](https://qiita.com/doran/items/8045701ba688f50d6295)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/817432932bf77c781002)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法](https://qiita.com/doran/items/7ccf10bb310ab46478d4)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)](https://qiita.com/doran/items/e69ba19cbd2f5049bc97)
[[Chrome拡張]　Chrome拡張メニューから開いていないWebページの情報を取得する方法](https://qiita.com/doran/items/c2d3249c53b97ddeed0d)
[[Chrome拡張]　ポップアップメニューを表示する方法](https://qiita.com/doran/items/6684c939c5dc2b9d091a)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法](https://qiita.com/doran/items/c34be1c03353a02cd04f)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/6b7181e369cd1be7dfc4)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(スタイル変更)](https://qiita.com/doran/items/00ea4f88862031811ed4)
[[Chrome拡張]　ストレージ(chrome.storage.local)を利用する方法](https://qiita.com/doran/items/38a89bcaf4b89c758725)
[[Chrome拡張]　オプションページを表示する方法](https://qiita.com/doran/items/8154f96c200b73bb9e38)