javascript - Web ページソース注釈ツール

Question

<ul class="contact">
<li class="first">Carnegie Mellon University</li>
<li>5000 Forbes Avenue, Pittsburgh, PA 15213</li>
</ul>

=>

<ul class="contact">
<li class="first">[univ]Carnegie Mellon University[/univ]</li>
<li>[address]5000 Forbes Avenue, Pittsburgh, PA 15213[/address]</li>
</ul>

何千もの Web ページに対して実行したいセマンティックアノテーションプロセスを示します。私の意図を明確にするために、これらの Web ページをすべてダウンロードして、ユーザー定義のタグ (例: 、 ) で注釈を付けたいと思いunivますaddress。注釈が付けられたページは、後で処理に使用されます。

私が使ってきた最も単純な方法は、ページをダウンロードし、ページファイルを開き、テキストエディターでファイルを編集して保存することです。それはあまりにも面倒です。

私が使用してきたより良いアプローチは、ブラウザから注釈を付けるターゲットテキストを選択し、Firebug などのツールでターゲットを検査し、検査したビュー内でターゲットテキストを編集し、編集したページを保存することです。これにより多少の負担は軽減されますが、まだ改善の余地がたくさんあります。

私が持っていたい理想的なツールは、ブラウザー内のページからターゲットテキストを選択し、対応する注釈タグを選択し (使用可能なすべてのタグを表示するツールバーから選択することが望ましい)、編集したページを保存できるツールです。ボタン一つで。

誰かがそのようなツールを知っていれば、それは素晴らしいことです。しかし、そのようなツールが存在するとは思えません。そのようなツールを自分で書かなければならない可能性があります。問題は、どのように始めればよいかということです。Web アプリケーションの開発経験はほとんどありません。

ブラウザー拡張機能を作成する必要がありますか? スタンドアロンアプリケーションを作成する必要がありますか? どの言語で？

編集: 質問のより単純なバージョンは、ここにあります。完全な作業ソリューションが優先されます。この問題は、経験豊富な Web 開発者にとっては大した問題ではないと思いますが、私にとっては時間がかかる可能性があり、できるだけ早く機能を実装する必要があります。

EDIT：また、右クリック後のドロップダウンリストよりも、選択直後のツールバーを好みます。chrome拡張用のツールバーDiigo Web Collectorはかなりクールだと思います。ここに画像の説明を入力

さらに、save編集したページをコンピュータ上のデフォルトまたはユーザー指定の場所に保存するには、ツールバーにボタンが必要です。ツールバーのボタンは次の順序である必要があります: univ address tag3 tag4... tagn save. 保存ボタンは最後です。

EDIT : Javascript を使用して、編集したページをローカルファイルシステムにダウンロードすることはできないようです。Chrome または Firefox では、検査済みビューでページのソースコードを編集した後、編集したページをローカルファイルシステムに保存するための保存ボタンがあります。それはどのように実装されましたか？その保存ボタンについて私が望んでいないのは、ディレクトリがページをダウンロードするように常に要求することです。独自の保存ボタンを備えたデフォルトのディレクトリにしたいと思います。

score 9 · Accepted Answer

Chrome 拡張機能は、この機能を自動化できます。このスケルトン機能をさらに拡張して、あらゆる可能性を実現できます。

次のスケルトンは、選択イベント^{1のマウスの右クリックイベントの}コンテキストメニューを追加します。

このスクリーンショットに示すように、メニューが Chrome ブラウザーに追加され、選択が行われるとアクティブになります。

テキスト選択後のコンテキストメニューの外観

ここに画像の説明を入力

¹ -マウスクリックによってテキストが選択されると、選択コンテキストイベントが発生します。

デモンストレーション

jsfiddleを見てください。クロム拡張機能のインストール後、ユーザー定義のタグで注釈が付けられます

前の HTML コード

ここに画像の説明を入力

選択後の HTML コード

<li>Chrome ブラウザに追加されたコンテキストメニューから jsfiddle の出力コンソールからテキストを選択すると、 DOM も変更されていることがわかります。

ここに画像の説明を入力

コードリファレンス

マニフェスト.json

マニフェストファイルはcontent script(s)、およびbackground page(s)拡張子にバインドします。

{
    "name": "Annotation Tool",
    "description": "http://stackoverflow.com/questions/14244498/web-page-source-annotation-tool",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "myscript.js"
            ],
            "all_frames": true
        }
    ],
    "permissions": [
        "contextMenus",
        "<all_urls>",
        "tabs"
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "icons": {
        "16": "screen.png",
        "48": "screen.png",
        "128": "screen.png"
    }
}

background.js

コンテキストメニューを作成してブラウザにバインドし、メッセージパッシングを通じてコンテキストメニューの実行をアクティブにします。

var _selection_univ = chrome.contextMenus.create({
    "title": "Add <univ> tag for %s ",
    "id": "_selection_univ",
    "onclick": reportclick,
    "contexts": ["selection"]
}, function () {
    console.log("Context Menu 2 Created");
});
var _selection_address = chrome.contextMenus.create({
    "title": "Add <address> tag for %s ",
    "id": "_selection_address",
    "onclick": reportclick,
    "contexts": ["selection"]
}, function () {
    console.log("Context Menu 2 Created");
});
//Add number of variables here for your functionality
function reportclick(info, tab) {
    switch (info.menuItemId) {
        case "_selection_univ":
            chrome.tabs.sendMessage(tab.id, "univ");//Notify Content Script for univ
            break;
        case "_selection_address":
            chrome.tabs.sendMessage(tab.id, "address");//Notify Content Script for address
            break;
        default:
            console.log("Handle default case..");
    }
}

myscript.js

//Handle DOM Changes here
chrome.extension.onMessage.addListener(function (message, sender, response) {
    switch (message) {
        //Hanlde [univ] tag 
        case "univ":
            if (document.getSelection().baseNode != null) document.getSelection().baseNode.parentNode.innerHTML = "[univ]" + document.getSelection().baseNode.parentNode.innerHTML + "[/univ]";
            break;
        //Hanlde [address] tag  
        case "address":
            if (document.getSelection().baseNode != null) document.getSelection().baseNode.parentNode.innerHTML = "[address]" + document.getSelection().baseNode.parentNode.innerHTML + "[/address]";
            break;
        default:
            console.log("Handle default case..");
    }
});

さらなる拡張

さらにいくつかのコンテキストメニューを追加したい場合

1) ここに示すように、コンテキストメニューの変数を作成します。background.js

var _selection_Some_Tag = chrome.contextMenus.create({
    "title": "Add [SOME TAG] tag for %s ",
    "id": "_selection_univ",
    "onclick": reportclick,
    "contexts": ["selection"]
}, function () {
    console.log("Context Menu for Some Tag Created");//In Call Back
});

2) ここに示すように、バックグラウンドページにスイッチのケースを追加します。

case "_selection_your_case":
    chrome.tabs.sendMessage(tab.id, "_your_tag_content"); //Notify Content Script for address
    break;

3) ここに示すようにコードを追加して、コンテンツスクリプトでカスタムタグを処理します。

//Hanlde [your custom] tag 
case "univ":
    if (document.getSelection().baseNode != null) document.getSelection().baseNode.parentNode.innerHTML = "[your tag]" + document.getSelection().baseNode.parentNode.innerHTML + "[/your tag]";
    break;

拡張機能のテストと読み込み

このスクリプトのテストと拡張については、拡張機能のロード方法を確認してください。

参考文献

編集1

クロム拡張の次のコードを使用できます

コンテキストメニューの代わりのツールバー
選択したテキストのみを置き換える
ファイルをサンドボックスの場所に保存する

このコードを使用するには、お気に入りのアイコンのいずれかを使用し、それらをすべてのタグの chrome ディレクトリに配置し、ここで[univ]対応する名前を使用しますcss file

background-image: url(chrome-extension:// MSG_@@extension_id /YOUR_ICON_NAME.png);

マニフェスト.json

に登録css and java scriptしていannotation toolます。

{
    "name": "Annotation Tool",
    "description": "http://stackoverflow.com/questions/14244498/web-page-source-annotation-tool",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "css": [
                "myscript.css"
            ],
            "js": [
                "jquery.js",
                "myscript.js"
            ],
            "all_frames": true
        }
    ],
    "permissions": [
        "contextMenus",
        "<all_urls>",
        "tabs"
    ],
    "icons": {
        "16": "screen.png",
        "48": "screen.png",
        "128": "screen.png"
    },
    "web_accessible_resources": [
        "icon1.png",
        "icon2.png"
    ]
}

myscript.css

ここにアイコンをバインドします。

#root #univ {
    display: inline-block;
    z-index: 100000;
    height: 22px;
    width: 26px;
    background-image: url(chrome-extension://__MSG_@@extension_id__/icon1.png);
}
#root #addr {
    display: inline-block;
    z-index: 100000;
    height: 22px;
    width: 26px;
    background-image: url(chrome-extension://__MSG_@@extension_id__/icon2.png);
}

myscript.js

選択したテキストをカスタムタグで更新するためのコード。

//Intialize counters to default values
clicking = false;
selecting = false;

//Set the toolbar to some invalid position so it will not appear unless a selection is made
var currentMousePos = {
    x: -100,
    y: -100
};

$(document).mousedown(function () {
    //Click is started
    clicking = true;
});

//Tool bar to add
$('body').append("<div id='root' style='position: absolute; left:" + currentMousePos.x + "px; top:" + currentMousePos.y + "px; display: block;'><a id='univ' href='javascript:void(0);'>&nbsp;</a><a id='addr' href='javascript:void(0);' >&nbsp;</a></div>");


$(document).mouseup(function (event) {
    if (selecting) {
        //He is selecting text
        $("#root").attr("style", "position: absolute; left:" + currentMousePos.x + "px; top:" + currentMousePos.y + "px; display: block;");
    } else {
        //He just clicked
        $("#root").attr("style", "display: none;");
    }
    //Reset counters
    clicking = false;
    selecting = false;
});

$(document).mousemove(function () {
    if (clicking) {
        //He did not simply click , but he is selecting some text
        selecting = true;
        //Track current position to put toolbar
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    }
});

$("div #addr").click(function () {
    //Get Selected text
    var selection = document.getSelection();
    //Add your tags and prepare replacing content
    var html = "[addr]" + selection + "[/addr]";
    if (selection.getRangeAt && selection.rangeCount) {
        //Chrome supports only one range fire fox supports multiple ranges
        range = document.getSelection().getRangeAt(0);
        //remove selection
        range.deleteContents();
        //Create a node
        node = range.createContextualFragment(html);
        //Add the custom node
        range.insertNode(node);
    }
});

$("div #univ").click(function () {
    //Get Selected text
    var selection = document.getSelection();
    //Add your tags and prepare replacing content
    var html = "[univ]" + selection + "[/univ]";
    if (selection.getRangeAt && selection.rangeCount) {
        //Chrome supports only one range fire fox supports multiple ranges
        range = document.getSelection().getRangeAt(0);
        //remove selection
        range.deleteContents();
        //Create a node
        node = range.createContextualFragment(html);
        //Add the custom node
        range.insertNode(node);
    }
});

出力1

テキストの任意の部分を置き換えることができるようになりました

ここに画像の説明を入力

アウトプット 2

Web ページを置き換える

ここに画像の説明を入力

選択した場所にファイルを保存する

chrome.pageCapture APIを使用してページをダウンロードすることは可能ですが、特定のsand boxed場所にダウンロードする必要があります。

pageCapture API を使用した実装例

マニフェスト.json

{
    "name": "Page Capture Demo",
    "description": "This demos Page Capture MHTML Functionality",
    "permissions": [
        "pageCapture"
    ],
    "browser_action": {
        "default_icon": "screen.png",
        "default_popup": "popup.html"
    },
    "manifest_version": 2,
    "version": "1"
}

popup.html

<html>

    <head>
        <script src="popup.js"></script>
    </head>

    <body>
        <div id="pushhere"></div>
    </body>

</html>

popup.js

function capture() {
    chrome.tabs.query({
        "active": true,
        "currentWindow": true,
        "status": "complete"
    }, function (tabs) {
        chrome.pageCapture.saveAsMHTML({
            "tabId": tabs[0].id
        }, function (data) {
            var reader = new FileReader();
            reader.onload = function (eventt) {
                console.log(eventt.target.result);
                document.getElementById('pushhere').innerHTML = eventt.target.result;
                //window.open(eventt.target.result);
            };
            reader.readAsText(data);
            //window.open(data);
        });
    });
}
window.onload = capture;

選択したアイコンを選択して、上記の手順を使用してこのコードをテストします。これが役立つことを願っています:)

編集 2

HTML ファイルのコンテンツへのアクセスimages、jsおよびcssファイルは chrome 拡張機能から可能です
ローカルディスクシステムへのアクセス (データの読み取りと保存) は、Chrome 拡張機能からはサポートされていません (セキュリティ上の理由から)。
ファイルをサンドボックス化された場所に保存できますが、一般的なアクセスではアクセスできません。

score 0 · Accepted Answer

ブラウザ拡張機能で問題ありません。スタンドアロンアプリケーションは、面倒な本格的なブラウザーを利用する必要があります。

(ブックマークレットとは対照的に) ブラウザー拡張機能を使用する場合にのみ、結果をファイルシステムに直接保存する権限があります。ブラウザ(G)UIにも「注釈」ボタンを追加できます。

ただし、何千もの HTML ファイルをハードディスクに保存することは目的ではないかもしれません。代わりに、アノテーションの結果を投稿する単純なデータベースサーバーをセットアップできます。その場合、クライアント側では、いくつかの ajax コードを含む小さなブックマークレットで十分です。

javascript - Web ページ ソース注釈ツール

2 に答える 2

テキスト選択後のコンテキスト メニューの外観

デモンストレーション

前の HTML コード

選択後の HTML コード

コード リファレンス

マニフェスト.json

background.js

myscript.js

さらなる拡張

拡張機能のテストと読み込み

参考文献

編集1

マニフェスト.json

myscript.css

myscript.js

出力1

アウトプット 2

選択した場所にファイルを保存する

pageCapture API を使用した実装例

マニフェスト.json

popup.html

popup.js

編集 2

Related

Reference

javascript - Web ページソース注釈ツール

テキスト選択後のコンテキストメニューの外観

コードリファレンス