示范

Question

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

=＆GT;

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

显示了我想要浏览数千个网页的语义标注过程。为了明确我的意图，我想下载所有这些网页，并使用用户定义的标记（例如univ，address）进行注释。带注释的页面稍后将用于处理。

我一直使用的最天真的方法是下载页面，打开页面文件，使用文本编辑器编辑文件并保存。这太麻烦了。

我一直在使用的更好的方法是从浏览器中选择要注释的目标文本，使用Firebug等工具检查目标，编辑检查视图中的目标文本并保存编辑过的页面。这有助于减轻一些负担，但仍有很大的改进空间。

我想要的理想工具是我可以在浏览器中从页面中选择目标文本，选择相应的注释标签（最好从显示所有可用标签的工具栏中选择），然后保存用一个按钮编辑的页面。

如果有人知道这样的工具，那就太棒了。但我怀疑这种工具是否存在。我有机会自己编写这样的工具。问题是，我该如何开始？我的Web开发经验很少。

我应该编写浏览器扩展吗？我应该写一个独立的应用程序吗？用什么语言？

编辑：可以找到问题的更简单版本here。完整的工作解决方案是首选。我认为这个问题对于经验丰富的Web开发人员来说并不是什么大不了的事，但对我来说可能需要一段时间，我需要尽快实现该功能。

编辑：此外，我选择刚刚选中后的工具栏到右键单击后的下拉列表。我认为chrome扩展Diigo Web Collector的工具栏非常酷。 enter image description here

此外，工具栏上需要save按钮，以将已编辑的页面保存到计算机上的默认位置或用户指定的位置。工具栏上的按钮应按以下顺序排列：univ address tag3 tag4 ... tagn save。保存按钮排在最后。

编辑：使用Javascript将编辑过的页面下载到本地文件系统似乎是不可能的。在Chrome或Firefox中，在我们在被检查视图中编辑页面的源代码之后，我们有一个保存按钮，用于将编辑后的页面保存到本地文件系统。这是如何实现的？我不想要的保存按钮是它总是提示下载页面的目录。我想用自己的保存按钮将它设为默认目录。

Answer 1

Chrome扩展程序可以自动执行此功能，您可以进一步扩展此框架功能以实现所有可能性。

以下骨架为鼠标的右键单击事件添加context menu以供选择事件¹

菜单会添加到Chrome浏览器中，并在按照此屏幕截图所示进行选择时激活

选择文本后的上下文菜单外观

enter image description here

¹ - 通过鼠标单击完成选择的文本时会触发选择上下文事件

示范

查看jsfiddle，安装chrome扩展后，用用户定义的标签

进行注释

之前的HTML代码

enter image description here

选择后的HTML代码

从jsfiddle的输出控制台中选择一个<li>文本，通过添加到chrome浏览器的上下文菜单，你可以看到DOM也被更改了！

enter image description here

代码参考

的manifest.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;

测试和加载扩展

检查How to Load an Extension是否有测试和扩展此脚本。

参考

编辑1

您可以使用以下Chrome扩展程序代码

工具栏代替上下文菜单
仅替换所选文字
将文件保存到沙盒位置

要使用此代码，请使用您喜欢的任何图标，并将其放在chrome目录中，以便为每个标记[univ]添加，并在css file这里使用相应的名称

background-image：url（chrome-extension：// MSG _ @@ extension_id /YOUR_ICON_NAME.png）;

的manifest.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

现在您可以替换文本的任何部分

enter image description here

输出2

替换任何网页

enter image description here

将文件保存到所选位置

可以使用chrome.pageCapture API下载该页面，但可以下载到sand boxed位置。

使用pageCapture API的示例实现

的manifest.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

可以从chrome扩展程序

images

js

css

Chrome扩展程序不支持访问本地磁盘系统（读取和存储数据）（出于安全原因）
您可以将文件保存到沙盒位置，但无法进行常规访问。

Answer 2

浏览器扩展程序应该没问题。独立应用程序需要使用功能齐全的浏览器，这很麻烦。

仅使用浏览器扩展（与书签对比），您才有权将结果直接保存到文件系统。您也可以将“注释”按钮添加到浏览器（G）UI中。

但是，在硬盘上存储数千个HTML文件可能不是您的目标。相反，您可以设置一个发布注释结果的简单数据库服务器。一个带有一些ajax代码的小书签就足够了。

网页源注释工具

2 个答案:

选择文本后的上下文菜单外观

示范

之前的HTML代码

选择后的HTML代码

代码参考

的manifest.json

background.js

myscript.js

进一步扩展

测试和加载扩展

参考

编辑1

的manifest.json

myscript.css

myscript.js

输出1

输出2

将文件保存到所选位置

使用pageCapture API的示例实现

的manifest.json

popup.html

popup.js

编辑2