【chrome extension】TVerマイページの視聴済み動画を非表示にする

chrome
スポンサーリンク

以前までTVerにあった視聴済み非表示が便利だったのですが、

急にその機能が無くなってしまって悲しかったので、chrome拡張機能で作成。

事前準備

jquery.min.jsをこちらからダウンロードしておく。

スクリプト

manifest.json

iconは適宜作成。なくても大丈夫。

{
  "manifest_version": 3,
  "name": "Tver 視聴済み動画削除",
  "version": "1.0",
  "description": "Tverで視聴済みの動画を表示させないようにする",
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

background.js

chrome.action.onClicked.addListener((tab) => {
  // jQueryを先に実行
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['jquery.min.js']
  }, () => {
    // jQueryの読み込み後にscript.jsを実行
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      files: ['script.js']
    });
  });
});

script.js

$(function() {
  if ($(".mypage-content-item_container__mTrdB").length > 0) { // 動画単位のdivに付与されているclass
    $(".mypage-content-item_container__mTrdB").each(function() {
      var progressBar = $(this).find(".progress-bar_progressIcon__6GPhf").get(0); // プログレスバーのclassを指定しオブジェクト取得
      
      // css('left')だと、positionが取得できてしまうため、オブジェクトを指定しstyle.leftで%を取得
      // 視聴済み動画はleft: 100%となっている
      if (progressBar && progressBar.style.left === "100%") {
        $(this).remove();
      }
    });
  }
});

フォルダ構成

このような感じでフォルダに配置。

インストール~使い方

chromeの拡張機能の画面を開き、画面右上のデベロッパーモードをオンにする。

「パッケージ化されていない拡張機能を読み込む」をクリックして、プログラムを格納したフォルダを選択

あとは、TVerのマイページを開き拡張機能のアイコンをクリックすると、

視聴済みの動画が一覧から非表示になると思います。

 

今回アイコンクリックをトリガーにしたのは、動画の一覧表示が非同期処理になっており、

DOMの読み込み終わりよりもあとに動画が遅延読み込みされているため、

ページ表示時にスクリプトを実行しても、その時点ではまだ動画のタグが生成されておらず、

非表示にできなかったためです。

 

 

ブログランキング・にほんブログ村へ
にほんブログ村


人気ブログランキング

コメント

  1. aaa より:

    これ, chrome extensionとして公開して欲しい。手軽になってみんな助かるから
    あと、NGワード非表示もあると大変素敵だなって思いました

    • たーちゃん より:

      コメントありがとうございます。
      自分も毎日使っている拡張機能なので、公開する方向で対応しようと思います。
      NGワードの機能については公開後に検討します。

  2. aaa より:

    うれしい。前回の投稿を忘れて、もう、氏著図海がいっぱい、嫌!で消し方を探していたらまたこのページにたどり着いた。
    きっと日本に何万人も同じニーズある人いるから、公開楽しみにしてます

タイトルとURLをコピーしました