4 
<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 开发人员来说没什么大不了的，但对我来说可能真的需要一段时间，我需要尽快实现这个功能。

编辑：另外，我更喜欢选择后的工具栏，而不是右键单击后的下拉列表。我认为 chrome 扩展的工具栏Diigo Web Collector很酷。 在此处输入图像描述

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

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

4

2 回答 2

9

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

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

将菜单添加到 chrome 浏览器，并在进行选择时激活，如此屏幕截图所示

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

在此处输入图像描述

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

示范

查看jsfiddle，安装 chrome 扩展后，它会使用用户定义的标签进行注释

之前的 HTML 代码

在此处输入图像描述

选择后的 HTML 代码

通过添加到chrome浏览器的上下文菜单从jsfiddle的输出控制台中选择一个<li>文本，你可以看到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"
    }
}

背景.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 扩展代码

  • 工具栏而不是上下文菜单
  • 仅替换选定的文本
  • 将文件保存到沙盒位置

要使用此代码，请使用您喜欢的任何图标并将它们放在每个标签的 chrome 目录中，并在此处[univ]使用相应的名称css file

背景图片：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"
    ]
}

我的脚本.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 的示例实现

清单.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 File(s) 的内容images，js并且css可以通过 chrome 扩展名访问文件
  • chrome 扩展不支持访问本地磁盘系统（读取和存储数据）（出于安全原因）
  • 您可以将文件保存到沙盒位置，但一般访问无法访问。
于 2013-01-12T09:23:10.937 回答
0

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

只有使用浏览器扩展程序（与小书签相反），您才有权将结果直接保存到文件系统。您也可以将“注释”按钮添加到浏览器 (G)UI。

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

于 2013-01-11T07:29:05.253 回答