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)には今後も期待しています。

Windows Application Driverを試してみました。前のページ

Microsoft Edgeの拡張機能を使って短縮URLを取得してみる(2)次のページ

関連記事

  1. Windows 10

    Chromium版のMicrosoft Edgeをインストールしてみました。

    下記記事の通り、今月の15日(米国時間)付でChromiumベースのM…

  2. Windows 10

    SeleniumBasic(Selenium VBA)がMicrosoft Edgeに対応しました。…

    言わずと知れたWebブラウザーの自動制御ツール「Selenium」のV…

  3. Office関連

    Windows 10 Technical PreviewにOffice XPをインストールしてみまし…

    「最新ビルドを詳細レビュー! Windows 10 Technical…

  4. Windows関連

    [Windows 8]ログオン時にデスクトップを表示する。

    通常Windows 8はログオン時にスタートスクリーンが表示されますが…

  5. Windows 10

    [Windows 10]切り取り&スケッチを起動するショートカット

    Windows 10の「切り取り&スケッチ」機能、皆さん使ってますでし…

  6. Windows 10

    WinAppDriver UI Recorderを試してみました。

    下記記事にある通り、「WinAppDriver UI Recorder…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

Translate

Chinese (Simplified)Chinese (Traditional)EnglishFrenchGermanJapaneseKoreanRussianSpanish

最近の記事

アーカイブ

PAGE TOP