Chrome Extention作成入門

ChromeExtention, プログラミング

Chrome ExtentionでAmazonリンク作成

Amazonのリンクを簡単に作りたいと思い、Chrome Extentionの作り方を勉強しました。

ここらへんを参考に、Amazonページを開いて所定のクリックをすると、ブログに貼れるコードを生成するように調整中。うまくできない。

そもそもエラーが出てExtentionが動かん。

Chrome Extensionを作る(2日目)

昨日うまく取得できなかったのはbackground.jsで取得しようと試みていたのが原因だった。そもそも仕組みを理解していなかったみたいだ。

コンテンツ内のDOMにアクセスするためにはbackground.jsではなく、content scriptでアクセスしないといけないらしい。

見るサイト、見るサイト事前知識が足りなくて読み解くことができないorz こういうことで時間を費やして挫折するのかもしれない。

ちょっとわかりやすいHowTo

全般からサンプル作成までシンプルに纏まっていてわかりやすいかも…。ただ、ちょっとソースコードが多すぎて、実際にサラの状態で動かしてみたもののうまく行かなかったので今回はパス。

シンプルで内容がわかりやすそう。

実装してみた

2個めのサンプルを参考に実装してみました。Amazon アフィリエイトのリンクを簡単に作るツールです。

{
  "name": "Amazonlinker",
  "version": "0.1",
  "description": "Amazon アフィリエイトのリンクを簡単に作るツールです。",
  "manifest_version": 2,
  "permissions": [
    "clipboardWrite",
    "activeTab"
  ],
  "background":  {
    "scripts": ["background.js"],
    "persistant": false
  },
  "browser_action": {
      "name": "Copy"
  }
}
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript({
        code: `
            var bgElement = document.createElement('div');
            var s = bgElement.style;
            s.position = 'fixed';
            s.left = '-100%';

			var image		= document.getElementById('amzn-ss-image-textarea').textContent;
			var shortlink	= document.getElementById('amzn-ss-text-shortlink-textarea').textContent;
			var booktitle	= document.getElementById('productTitle').innerText;

			console.log(image);
			console.log(shortlink);
			console.log(booktitle);

			//bgElement.appendChild(document.createElement('pre')).textContent = 'Test';
			bgElement.appendChild(document.createElement('pre')).textContent = '<h3>' + booktitle + '</h3>';
            bgElement.appendChild(document.createElement('pre')).textContent = '<a href="' + shortlink + '">Amazonで見る</a><br>';
            bgElement.appendChild(document.createElement('pre')).textContent = image;
            document.body.appendChild(bgElement);
            document.getSelection().selectAllChildren(bgElement);
            var result = document.execCommand('copy');
            document.body.removeChild(bgElement);
        `
    });

    chrome.browserAction.setBadgeText({
        tabId: tab.id,
        text: 'Copy'
    });
    setTimeout(function(){
        chrome.browserAction.setBadgeText({
            tabId: tab.id,
            text: ''
        });
    }, 1000);

});

これらのソースをフォルダにまとめて、Chromeにぶちこめばうごきます。ぶちこむ方法は、上記のブログ等で紹介されているので、それに従えばOKです。