596 views

こんな感じでクリックした箇所を赤枠表示し、xpathをconsoleに出力するプラグインのサンプルプログラム。

まず、manifestファイルを作成する。

{
    "name": "samplePlugin",
    "short_name": "sample",
    "version": "1.0",
    "manifest_version": 2,
    "description":"これはサンプルのプラグインです",

    "permissions": [
        "tabs",
        "storage"
    ],
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": [
          "background.js"
        ]
      }],
    "browser_action": {
        "default_icon": "sample.png",
        "default_title": "SampleTitle",
        "default_popup": "popup.html"
    }
}

次にxpathを取得するjavascriptを作成する。ファイル名はbackground.js。

function getXpath(element) {
    if (element && element.parentNode) {
        var xpath = getXpath(element.parentNode) + '/' + element.tagName;
        var s = [];
        for (var i = 0; i < element.parentNode.childNodes.length; i++) {
            var e = element.parentNode.childNodes[i];
            if (e.tagName == element.tagName) {
                s.push(e);
            }
        }
        if (1 < s.length) {
            for (var i = 0; i < s.length; i++) {
                if (s[i] === element) {
                    xpath += '[' + (i + 1) + ']';
                    break;
                }
            }
        }
        return xpath.toLowerCase();
    }
    else {
        return '';
    }
}
var g_newDiv = null;
function onClick(e) {
    console.log("クリックされました");
    var target = e.target;

    var childNodes = e.target.childNodes;
    console.log(childNodes);

    console.log("click xpath:" + getXpath(target));
    var rect = target.getBoundingClientRect();
    var top = window.pageYOffset + rect.top;
    var left = window.pageXOffset + rect.left;
    console.log("top: " + top);
    console.log("left:" + left);
    console.log("width:" + rect.width);
    console.log("height:" + rect.height);
    var bodys = document.getElementsByTagName("body");
    console.log("version 1");
    console.log(bodys);
    if(!bodys) {
        console.log("bodyが見つかりません");
        return;
    }
    else {
        body = bodys[0];
    }
    if (g_newDiv != null) {
        body.removeChild(g_newDiv);
        g_newDiv = null;
    }
    var newDiv = document.createElement("div");
    g_newDiv = newDiv;
    //newDiv.innerHTML = "あいうえお";
    newDiv.style.border = "solid 3px #ff0000";
    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "1000";
    newDiv.style.left = left + "px";
    newDiv.style.top = top + "px";
    newDiv.style.width = rect.width + "px";
    newDiv.style.height = rect.height + "px";
    newDiv.style.backgroundColor = "transparent";
    newDiv.style.pointerEvents = "none";
    body.appendChild(newDiv);

}

function onInput(e) {
    console.log(e.target.value);
    /*
    保存するときはサーバーに送信するか、ローカルに保存するか。
    */

    localStorage.setItem("test", e.target.value);
}

function main() {
    console.log("main start");
    chrome.storage.local.get("active", function(value){
        console.log("呼ばれました");
        console.log(value);

        if(value["active"] == true) {
            console.log("開始します");
            document.addEventListener('click', onClick);
            document.addEventListener("input", onInput);
        }
        else {
            console.log("停止します");
        }
    });

}

window.onload = main();

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log("受信しました");
        main();
    }
);

最後に設定画面用のpopup.htmlを作成する。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body style="min-width:250px">
        <p>Hello world!</p>
        <input type="text" name="name">
        <button id="start" type="button">レコーディング</button>
        <button id="stop" type="button">停止</button>


    <script src="popup.js" type="text/javascript"></script>
    </body>
</html>

オプション用のiconを作成する。