極小構成でChrome拡張を作る

Chrome拡張を作ってみた

自分がよく使うサイトでちょっと不便なところがあったので、Chrome拡張で改変してみました。
内容としては「FullScreen時に一部のオブジェクトを透過表示する」というもので、対象のサイトに
JavaScriptを追加するだけのChrome拡張になっています。

ファイル構成

manifest.jsonと追加するJSファイルのみ。
試しにアイコンの画像も置いています。

• opre_comment_transparent/
  • manifest.json
  • 48.png
  • scripts/
    • contentscript.js
    • resource/
      • jquery-3.2.1.min.js

ソース

Gihhub

manifest.json

大体の内容はキー名から連想できます。
今回はJSの拡張なのでcontent_scripts以下が肝となります。

matches：対象とするURL(1つしか記述してないが、複数記述可能)
js：JSファイルのパス
run_at：読込タイミング

manifest.json

{
  "name": "opre_comment_transparent",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "display openrec comment to full screen.",
  "icons": {
      "48" : "48.png"
  },
  "content_scripts": [
    {
      "matches": [
        "https://www.openrec.tv/live/*"
      ],
      "js": [
        "scripts/resource/jquery-3.2.1.min.js",
        "scripts/contentscript.js"
      ],
      "run_at": "document_end"
    }
  ]
}

cotentscript.js

普通のJSファイルです。

contentscript.js

'use strict';

var chart_area_bg_color = '';
var comment_area_bg_color = '';

function fn_full_sc_com_open() {
    chart_area_bg_color = $('.c-chart.js-chartArea.live').css('background');
    comment_area_bg_color = $('.c-chart__comment.js-chartCommentArea.js-chartCommentAreaPc').css('background');
    $('#openrec-video-player').append($('<div id=\'full_sc_com_case\'></div>'));
    $('#full_sc_com_case').append($('<a class=\'full_sc_com_close_btn\' href=\'javascript:void(0)\'>✖</div>'));
    $('#full_sc_com_case').css('position', 'absolute');
    $('#full_sc_com_case').css('right', '0');
    $('#full_sc_com_case').css('font-size', '1.2rem');
    $('#full_sc_com_case').css('text-align', 'left');
    $('#full_sc_com_case').append($('#ticker'));
    $('#full_sc_com_case').append($('.c-chart.js-chartArea.live'));
    $('.c-chart.js-chartArea.live').css('background', 'rgba(0,0,0,0.4)');
    $('.c-chart__comment.js-chartCommentArea.js-chartCommentAreaPc').css('background', 'transparent');
}
function fn_full_sc_com_close() {
    $('.full_sc_com_close_btn').remove();
    $('.p-playlist').prepend($('#ticker'));
    $('.p-playlist').append($('.c-chart.js-chartArea.live'));
    $('.c-chart.js-chartArea.live').css('background', chart_area_bg_color);
    $('.c-chart__comment.js-chartCommentArea.js-chartCommentAreaPc').css('background', comment_area_bg_color);
}

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) {
    if (!window.screenTop && !window.screenY) {
        // not fullscreen
        fn_full_sc_com_close();
    } else {
        // fullscreen
        fn_full_sc_com_open();
    }
});

$(document).on('click', ".full_sc_com_close_btn", function () {
    fn_full_sc_com_close();
});

公開について

5$課金すると通常の公開が行えますが、しなくても限定公開(URLを知っている人のみ)や非公開(自分のみ)は出来ます。
公開はChrome ウェブストアのデベロッパーダッシュボードより行えます。

Chrome ウェブストア - 拡張機能