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

    続・起動中のMicrosoft EdgeからタイトルとURLを取得するC#コード(UI Automa…

    2017/8/18 追記:当記事のコードは現在動作しなくなっている…

  2. Windows 10

    ストアアプリを起動するPowerShellコード

    ストアアプリ(UWPアプリ)は実行ファイルをダブルクリックする等して直…

  3. Windows 10

    【2017年4月版】Microsoft Edgeで開いているページを名前を付けて保存する方法

    2015年8月に、Microsoft Edgeで開いているページを名前…

  4. Windows 10

    [Windows 10]Windows Ink ワークスペースの付箋を起動するショートカット

    前回の記事の関連です。前回はWindows Ink ワークスペ…

  5. Windows関連

    [Windows 8]拡張子を表示する。

    ※ 下記はWindows Developer Preview(英語版・…

  6. Windows関連

    Windows 8 Consumer PreviewにMicrosoft Security Esse…

    ※ 下記はWindows 8 Consumer Preview(日本語…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP