アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

Instagramのログインモーダル邪魔だから消すChrome拡張機能の作り方

はろー

今回はタイトルの通りです。インスタグラムのモーダルを消したい人にもそうですが、Chromeの拡張機能を初めて作るって人にも役立つ記事と思います。

PC版のインスタグラム。 ログインしてないとこれでますよね。

画面がロックされるやんけ...

このモーダル消えないんですよね。「何もできんくなった...」って感じ。

私を怒らせた

いや、私は怒ってないが世間が怒った。
ような気がするのでChromeの拡張機能でこのストレスから解き放たれます。

同じものを作れば同じ様に使えると思います。

早速作る

まず「instagram」っていうフォルダを作ってその中に main.jsmanifest.json っていう2ファイルを作成します。 こんな感じです。

instagram/
   |- main.js
   |- manifest.json

main.js の中身を以下の様にします。

const host_url = location.host;

if (host_url === "www.instagram.com") {
  setInterval(function () {
    const elem1 = document.getElementsByClassName("RnEpo");
    elem1[0].remove();
    document.body.style.overflow = 'auto'
  }, 1000)
}

やっていることはモーダルを消して、スクロールの有効化です。

続いて manifest.json の中身です。

{
  "name": "insta-saikou",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "インスタのログインモーダルを無効化しますごめんなさい",
  "content_scripts": [{
    "matches": [
      "https://www.instagram.com/*"
    ],
    "js": [
      "main.js"
    ]
  }],
  "permissions": ["activeTab"]
}

以上です。

拡張機能を有効化する

Chromeブラウザから拡張機能のページを開きます。 Chromeのアドレスバーに以下を打ち込んでも開けます。
chrome://extensions/

「パッケージ化されていない拡張機能を読み込む」ボタンを押して、 さっき作った「instagram」ってフォルダを選択します。

こんな感じのが追加されてば完了。

f:id:agonosetaro:20200206161905p:plain

バーにびっくりマークみたいなアイコンが追加されてればOK。

f:id:agonosetaro:20200206162055p:plain

実際にインスタの画面スクロールすると、モーダルが表示されそうになりますが、すぐに消えてその後もスクロールが続けられると思います。

この拡張機能を消したくなったら先ほどの拡張ページから「削除」ボタンを押してください。

拡張機能にアイコンをつけたい人は

今回は試しにこちらの画像を使ってみます。

iconsフォルダを作成して、その中に16x1648x48128x128サイズの画像を置いてあげます。ファイル名は任意ですが、後述 するmanifest.json の記載と合わせてください。

instagram/
   |- icons/
   |    |- 16.png
   |    |- 48.png 
   |    |- 128.png 
   |- main.js
   |- manifest.json

manifest.json にアイコンの場所を指定してあげます。

↓のコードを追加してあげます。

  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  }, 

↓追加後

{
  "name": "insta-saikou",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "インスタのログインモーダルを無効化しますごめんなさい",
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  }, 
  "content_scripts": [{
    "matches": [
      "https://www.instagram.com/*"
    ],
    "js": [
      "main.js"
    ]
  }],
  "permissions": ["activeTab"]
}

再度拡張機能画面から読み込めを行うと反映されます。

結果こうなります。

f:id:agonosetaro:20200206161429p:plain

おわり

インスタは最高なのでぜひログインして使いましょう!

以上

スポンサーリンク