株式会社ライブキャストロゴ 株式会社ライブキャスト

Google Chrome 拡張機能を作ってみた

2016年6月1日 GitHub, Google Chrome, javascript
シェア

ブログを書くときなどに、参考にさせてもらったサイトへのリンクを貼ることがよくありますが、管理者機能のエディタなどから真面目に入れていこうとすると、結構面倒くさかったりします。

リンクを挿入する画面

普段ブラウザはGoogle Chromeを使用していることが多いのですが、拡張機能などでブログに貼りつけるアンカータグがサクッと作れたらいいな～、と思いました。
ということで、見ているホームページのタイトルとURLから、アンカータグをクリップボードに保存するというChrome拡張機能を作ってみました。

機能概要

①URL
閲覧中のホームページのURLと

閲覧中のホームページのurl

②title
そのホームページのタイトルタグから、

<!DOCTYPE html> 
<html lang="en-US" class="static detail-my-subscriptions-page dir-ltr contents" dir="ltr"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<title>Microsoft Cognitive Services - My free subscriptions</title>

↓

③アンカータグ
以下のような、リンク先のURLを別ウィンドウで開くアンカータグを作成します。
<a href=”①” target=”_blank”>②</a>

操作方法

拡張機能のアイコンを

拡張機能のアイコン

クリックすると、

拡張機能のアイコンをクリックするところ

機能概要③の文字列がクリップボードにコピーされます。
後は、ブログのエディタ上でCtrl+V（ペースト）してエントリを公開すると、

公開されたアンカータグ

target=”_blank”でそのサイトを開くリンクになります。

新規windowで開く

今回は、Chrome ウェブストアにアップすることが目的だったので、ちょーシンプルで、target=”_blank”は設定で入らないにようにするといったような機能はありません。
③の形式固定です。
※ target=”_blank”は、いるとかいらないとかあると思いますが。。。これがこの拡張機能のウリです。

コレです。
↓
_blank anchor generater – Chrome ウェブストア

ソースコードも数行です。こんな感じです。

chrome.browserAction.onClicked.addListener(function(e) {
	var text = document.createElement("textarea");
	text.textContent = '<a href="' + e.url + '" target="_blank">' + e.title + '</a>';

	var body = document.getElementsByTagName("body")[0];
	body.appendChild(text);

	text.select();
	var retVal = document.execCommand("copy");

	body.removeChild(text);
});

manifest.jsonはこんな感じです。

{
  "name": "_blank anchor generater",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Generates a anchor tag from the title of the home page is now open. Anchor tag generated is stored on the Clipboard.",
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": { "scripts": ["background.js"] },
  "browser_action": {
  "default_icon": {
      "19": "icon_19.png",
      "38": "icon_38.png"
    },
    "default_title": "Linker"
  }
}

GitHubにもアップしておきました。
mojyamojya/bag
詳細はまたの機会にご紹介したいと思います！

よかったら使ってみてください！

関連記事

»
«