Life is a Beautiful Struggle

jentagawaの平凡な毎日。ウェブ制作、音楽、MIDIコンについて。

ページに埋め込まれた、SVG画像を保存するChrome拡張機能

国内サイトでも増えてきている、SVG拡張子の画像。他のサイトで使用されているSVG画像を保存するのが面倒くさいときがあります。


そんな時に便利な、Chrome拡張機能を作ってみました。
多分探せばもっといいやついっぱいあると思うけど!笑

ウェブサイト作る要領で簡単なアプリができちゃうのは楽しいですね。

ファイル構成はこんなかんじ。果たして拡張機能にする意味があるのでしょうか?笑

/
 ├images
 │ └アイコン画像いっぱい
 ├ js/
 │ └background.js
 │ └content_script.js
 │ └jquery-3.2.1min.js
 └manifest.json
 

manifest.jsonはこんなかんじ。
Chromeに対する自己紹介みたいな。

{
    "name": "Save SVG",
    "description": "This extension saves SVG",
    "version": "2.4.4",
    "manifest_version": 2,
    "icons":
    {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    },
    "browser_action":
    {
        "default_icon":
        {
            "19": "images/icon_19.png",
            "38": "images/icon_38.png"
        },
        "default_title": "Save SVG"
    },
    "permissions": [
        "activeTab"
    ],
    "background": {
        "scripts": ["js/background.js"],
        "persistent": false
    }
}

browser actionという指定をすることで、アイコンがメニューバーのところに常住するタイプの拡張機能になります。
permissionsのところで、アクティブタブの情報にアクセスできるようにしています。
backgroundで、background.jsが走るようにしています。ずっと走りっぱなしだと、負荷がかかりそうなので、persistent falseにしましたが、その効果はよくわかってないです。

次にbackground.js。

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,{ file: "js/jquery-3.2.1.min.js"},
           function(){
              chrome.tabs.executeScript(null,{file: "js/content_script.js"});
              });
          });


アイコンをクリックした時に、jqueryとcontent_script.jsを閲覧しているページに追加してください。という指示です。


最後にcontent_script.jsです。
※これは出来合いのものをコピってきました。

var e = document.createElement('script');
e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js');
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);


eという変数に、scriptというタグを作る指示を格納。
変数eのsrc属性にhttps://nytimes.github.io/svg-crowbar/svg-crowbar.jsを設定する。
変数eのclass属性にsvg-crowbarを設定する。
変数eをページに追加する。


さぁこれでSVGが埋め込まれてるサイトがあったときには、一発ダウンロード!

chrome.google.com


2018年初風邪。
昨日、一昨日と更新できなかったので、今日頑張って連続投稿です!