さっとQiitaを見たいときに使える。全然スマートじゃない”SMART_PREVIEW”Chrome拡張機能を作った話

#Qiitaを拡張させたい
最近Qiitaでの調べ物の頻度が増えてきた私は、ふとこんなことを思った。
**なんで検索画面にプレビュー機能ないんだろう**
くだらないと思った方、正解です。
でも深夜テンションって怖いですね。
こんなことを思いついた結果、
**拡張機能作ればいいじゃんｗｗ**
となったのです。

それではどんな感じになったのかご覧頂きましょう。
#こんな感じなイメージ
Movie
https://youtu.be/8_Tt3_7xvEE
Image
![SnapCrab_NoName_2020-5-18_22-34-15_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498105/ba20d9de-a523-4ff8-5161-ac8986ae6a8d.png)
![SnapCrab_NoName_2020-5-18_22-34-45_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498105/ff3a430a-a2ac-8427-ffb0-b361619de153.png)
![SnapCrab_NoName_2020-5-18_22-34-55_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498105/1675e025-6918-2afe-e508-bee98fa5252f.png)
![SnapCrab_NoName_2020-5-18_22-35-12_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498105/b1dd1136-66e7-8547-a3af-4ff0d82b9fa3.png)

#How it works
今回もContents_scriptを利用して作成しましたが、
今回はBootstrapのみならず、Jqueryと
MarkdownをHtmlにしてくれる
Markedを導入した上で作成しました。
動きとしては
JqueryとMarkedが読み込まれる
メインスクリプトがページ生成後に実行
・このタイミングでボタン生成
ボタンを押すとイベント発火
・ここでQiitaAPIを用いて記事情報取得
＝＞Markedでなんとなく整形
（コードなどの一部の特殊なのは読み込めなかったっぽい？）
（URLは長いやつだと画面外にでてうざかったので、
replaceで置き換えといた。）
最後に適当にAppendしておく

チェックポイント1
今回のコード作成においてQiitaで本来使われている、
BootstrapのFlexに邪魔されてるので、
CSSを次のようにして無効（＆見やすさアップしました。）

```css

.tr-Item{
display:block !important;
}
.p-home_container {
    max-width: 3000px !important;
}

```
(この変更で、画面幅が一定以下で一部要素が下に行ったりします)

チェックポイント２
はじめは全く動作せず、こころが折れそうだったので、
はじめ考えていたtooltip形式をやめた途端、
うまくいきました。（なぜでしょう）

#コード軍

```js
$(document).ready(function () {
  $(".tr-Item_meta,.tf-ItemContent_meta,.ms-ItemContent_meta,.searchResult_sub").append("<button id='make_pre' class='btn btn-primary'>Preview_show</button>")
});
$(document).on('click', '#make_pre', function () {
  console.log($(this).parent().attr("class"))
  if ($(this).parent().attr("class")==="searchResult_sub"){
    
    if ($(this).parent().next("#pre").length) {
      $(this).parent().next("#pre").remove()
    } else {
      const url = $(this).parent().prev().find(".searchResult_itemTitle").find("a").attr("href");
      console.log(url)
      const pos = this
      const req = url.replace(/\/.*\/items\//g, "/api/v2/items/")
      $.getJSON("https://qiita.com" + req, function (data) {
        console.log(data.body)
        const content = "<div id='pre' class='card'><h1>Preview</h1><br>" + marked(data.body.replace(/\(http.*\)/g, "[URL]")) + "</div>";
        $(pos).parent().parent().append(content);
      })
    }
  }else{
  if ($(this).parent().next("#pre").length) {
    $(this).parent().next("#pre").remove()
  } else {
    const url = $(this).parent().prev().attr("href");
    console.log(url)
    const pos = this
    const req = url.replace(/\/.*\/items\//g, "/api/v2/items/")
    $.getJSON("https://qiita.com" + req, function (data) {
      console.log(data.body)
      const content = "<div id='pre' class='card'><h1>Preview</h1><br>" + marked(data.body.replace(/\(http.*\)/g, "[URL]")) + "</div>";
      $(pos).parent().parent().append(content);
    })
  }
}
});

```
メインコード
無駄しかない。

```json
{
  "name": "qiita_smart_preview",
  "version": "1",
  "description": "qiita。\nUsing by jquery and bootstarp4",
  "content_scripts": [{
    "js": ["jquery-3.5.1.min.js","marked.min.js","background.js"],
    "css":["bootstrap.min.css","css.css"],
    "matches": ["https://qiita.com/*"],
    "run_at": "document_end",
    "all_frames": true
  }],
  "icons": {
    "48": "images/icon.png"
  },

  "manifest_version": 2
}

```
マニフェスト
前回とあんまり変わんない。

#まとめ
Jquery便利だけどThisの継承忘れに注意しようと思った。
（中のFanctionでThisなんでむりなーんっと愚痴っておりました。）

```js
const pos = this
```

おしまい
（ほしいとコメント頂いた暁には、
GithubにコードをUploadしようと思います。
＝＞コード管理一切していなかっただけ）