网页源注释工具

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>

显示了我想要浏览数千个网页的语义标注过程.为了明确我的意图,我想下载所有这些网页并用用户定义的标签注释(例如univ,address).带注释的页面稍后将用于处理.

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

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

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

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

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

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

编辑:此外,我选择右键后的工具栏,右键单击下拉列表.我认为镀铬扩展的工具栏Diigo Web Collector非常酷.

此外,save工具栏上还需要一个按钮,用于将编辑过的页面保存到计算机上的默认位置或用户指定的位置.工具栏上的按钮应该按以下顺序:univ address tag3 tag4... tagn save.保存按钮排在最后.

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

Answer 1

chrome扩展可以自动执行此功能,您可以进一步扩展此骨架功能以实现所有可能性.

以下框架为选择事件¹添加鼠标右键单击事件的上下文菜单

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

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

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

示范

看看jsfiddle,在安装chrome扩展后,它用用户定义的标签注释

HTML代码之前

选择后的HTML代码

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

代码参考

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

测试和加载扩展

检查如何加载扩展以测试和扩展此脚本.

参考

• Chrome扩展程序.
• 背景页面
• 内容脚本
• 上下文菜单
• 消息传递
• 扩展API
• DOM选择

编辑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

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

输出2

替换任何网页

将文件保存到所选位置

可以使用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

• 访问HTML文件(S)的内容images,js以及css文件可以从Chrome扩展
• Chrome扩展不支持访问本地磁盘系统(读取和存储数据)(出于安全原因)
• 您可以将文件保存到沙盒位置,但无法访问这些位置以进行常规访问.