Windows 10

Microsoft Edgeの拡張機能を使って短縮URLを取得してみる。

2016/4/8 追記:
Microsoft Windows 10 Insider Preview 10.0.14316 ビルド 14316(Microsoft Edge 37.14316.1000.0)にアップしたらコードが動かなくなったので書き直しました。

・Microsoft Edgeの拡張機能を使って短縮URLを取得してみる(2)
//www.ka-net.org/blog/?p=6887


Microsoft Edgeの拡張機能を色々試してみた」で書いた通り、今の時点でもMicrosoft Edgeの拡張機能(Microsoft Edge Extensions)で多少のことはできるようだったので、今回は実用的な機能を実装してみました。

短縮URLを取得するボタン

Twitterで長いURLを投稿する際に役立つのがURL短縮サービスです。

特にGoogleが提供している「Google URL Shortener」はAPIも提供されているので、プログラムから簡単に短縮URLを取得することができます。

今回はこのAPIを使って、Edgeの拡張機能から表示中のWebページの短縮URLを取得してみたいと思います。

※ Edge用拡張機能のテスト方法はこちらの記事をご参照ください。

manifest.json

{
  "name": "短縮URL取得",
  "description": "Google URL Shortener APIを使って短縮URLを取得します。",
  "version": "1.0.0.0",
  "locale": "ja",
  "default_locale": "ja",
  "icons": {
    "24": "img/icon_24.png",
    "128": "img/icon_128.png"
  },
  "background": {
    "page": "background.html"
  },
  "browser_action": {
    "title": "短縮URL",
    "icon": {
      "20": "img/icon_20.png",
      "25": "img/icon_25.png",
      "30": "img/icon_30.png",
      "40": "img/icon_40.png"
    }
  }
}

permissionsの設定が必要かと思ったのですが、無くても動作したのでとりあえず無しにしています。

background.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>短縮URL取得</title>
  <meta charset="utf-8">
  <script src="./js/background.js"></script>
</head>
</html>

background.js

(function() {
    typeof msBrowser != "undefined" ? chrome = msBrowser : typeof browser != "undefined" ? chrome = browser : chrome = null;
    
    chrome.browserAction.onClicked.addListener(function(tab) {
        chrome.tabs.executeScript(null, {
            "file" : "./js/ext.js"
        });
    });
})()

今回はボタンクリック時にスクリプトを実行したいので、Tabs APIのexecuteScriptメソッドを使って、外部ファイルを呼び出します。

ext.js

var key = "(Google API Consoleで取得したAPIキー)";
var xhr = new XMLHttpRequest();

xhr.addEventListener("load", function(event) {
    var obj = JSON.parse(this.responseText);
    typeof obj.error != "undefined" ? alert("Error") : window.prompt("Short URL:", obj.id);
});

xhr.addEventListener("error", function(event) {
    alert("Error");
});

xhr.open("POST", "https://www.googleapis.com/urlshortener/v1/url?key=" + key);
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({"longUrl":location.href}));

APIキーの取得方法は「Goo.glで短縮URLを取得するVBAマクロ」をご参照ください。
(今のGoogle API Consoleだとちょっと取得方法が異なりますが、大体は同じです。)

動作画面

Microsoft_Edge_Extensions_03_01

上図の通り、拡張機能を読み込んでボタンをクリックすると、表示中のWebページの短縮URLがprompt表示されます。

小さな機能ですが、こうして自分で機能を拡張できるのはとても便利です。
Microsoft Edgeはまだ新しいブラウザーで、足りない機能もたくさんあるので、この拡張機能(Microsoft Edge Extensions)には今後も期待しています。

関連記事

  1. Windows 10

    PowerShellでMicrosoft Edgeを操作する

    前回の記事でWebDriverを使ってMicrosoft Edgeを操…

  2. Windows 10

    Microsoft Edgeの場所

    「Edge 本体 場所」「Microsoft Edge EXE どこ」…

  3. Windows関連

    PCをクリーンインストールしたので普段使っているツールをまとめてみた。

    Office 2016のリリースに合わせてメインで使っているPCをクリ…

  4. Windows 10

    YouTubeの「歌ってみた」動画を非表示にするMicrosoft Edge拡張機能

    私はよくYouTubeで動画を見るのですが、公式PVを見たいだけなのに…

  5. Windows関連

    [Windows 8]シャットダウンはどこ?

    2012/03/01 追記:Windows 8 Consumer Pr…

  6. Windows 10

    Microsoft Edgeで開いているページを名前を付けて保存する

    2017/4/15 追記:現在この記事に書いてある方法は使えなくな…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP