开始使用Chrome进行开发

Question

I have been asked by my friend to make an application for Chrome and it requires me to have context-sensitive menus as below: 我的朋友已经要求我为Chrome制作应用程序，它要求我提供上下文相关菜单，如下所示：
在此输入图像描述

I have never really made anything for Chrome before and I have a few questions regarding it: 我之前从未真正为Chrome做过任何事情，我有几个问题：

I will have to develop a plug-in , right ? 我将不得不开发一个plug-in ，对吗？
If so, is there a specific set of rules I have to follow ? 如果是这样，我必须遵循一套特定的规则吗？

I know I can use GWT to compile Java to JavaScript 我知道我可以使用GWT将Java编译为JavaScript
3. This context sensitive menu is the same as JPopupMenu ? 3.此上下文相关菜单与JPopupMenu相同？

The application I want to develop is simple: 我想开发的应用程序很简单：
Copy some text, 复制一些文字，
right-click, click on the context sensitive menu 右键单击，单击上下文相关菜单
apply simple Caesar's cipher to the text 将简单的凯撒密码应用于文本
open a new JFrame with JtextArea in it to display the encrypted text. 在其中打开一个带有JtextArea的新JFrame以显示加密文本。

Answer 1

What you're creating is called an " extension ", not a "plug-in". 您正在创建的内容称为“ 扩展 ”，而不是“插件”。 A browser extension is written using HTML, CSS and Javascript, and got access to APIs for direct interaction with the browser. 浏览器扩展使用HTML，CSS和Javascript编写，并且可以访问API以与浏览器直接交互。
Plug-ins , on the other hand, are compiled binaries such as Flash and Java. 另一方面，插件是编译的二进制文件，如Flash和Java。
Drop the idea of using GWT for Chrome extensions. 放弃使用GWT进行Chrome扩展的想法。 It makes development of the extension harder, not easier ( open issue ). 它使扩展的开发更难，而不是更容易（开放问题）。
Especially because you'll find plenty of vanilla JavaScript examples and tutorials in the documentation and Stack Overflow. 特别是因为你会在文档和Stack Overflow中找到大量的vanilla JavaScript示例和教程。

You just have to know the relevant APIs: 您只需要知道相关的API：

Copy some text, right-click, click on the context sensitive menu 复制一些文本，右键单击，单击上下文相关菜单

Use chrome.contextMenus . 使用chrome.contextMenus 。 There's no need to copy, the selected text is available in the callback ( examples ). 无需复制，所选文本在回调中可用（示例）。

apply simple Caesar's cipher to the text 将简单的凯撒密码应用于文本

Create a JavaScript function to achieve this. 创建一个JavaScript函数来实现这一目标。

open a new JFrame with JtextArea in it to display the encrypted text. 在其中打开一个带有JtextArea的新JFrame以显示加密文本。

Create a new window using chrome.windows.create . 使用chrome.windows.create创建一个新窗口。 You could include an extra HTML page in your extension, and use the message passing APIs to populate the text field, but since you appear to be a complete newbie, I show a simple copy-paste method to create and populate this window: 您可以在扩展中包含一个额外的HTML页面，并使用消息传递API来填充文本字段，但由于您似乎是一个完整的新手，我展示了一个简单的复制粘贴方法来创建和填充此窗口：

function displayText(title, text) {
    var escapeHTML = function(s) { return (s+'').replace(/</g, '&lt;'); };
    var style = '*{width:100%;height:100%;box-sizing:border-box}';
    style += 'html,body{margin:0;padding:0;}';
    style += 'textarea{display:block;}';
    var html = '<!DOCTYPE html>';
    html += '<html><head><title>';
    html += escapeHTML(title);
    html += '</title>';
    html += '<style>' + style + '</style>';
    html += '</head><body><textarea>';
    html += escapeHTML(text);
    html += '</body></html>'

    var url = 'data:text/html,' + encodeURIComponent(html);
    chrome.windows.create({
        url: url,
        focused: true
    });
}

Don't forget to read Getting started to learn more about the extension's infrastructure. 不要忘记阅读入门以了解有关扩展基础架构的更多信息。

Answer 2

Check out Google Chrome Extensions Chrome Extensions 查看Google Chrome扩展程序Chrome扩展程序

The Getting Started will help you Getting Started 入门指南将帮助您入门

You will find a section on how to use Context Menus. 您将找到有关如何使用上下文菜单的部分。

开始使用Chrome进行开发

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-05-25 17:28:13

解决方案2
0 2013-05-25 16:55:13

开始使用Chrome进行开发

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-05-25 17:28:13

解决方案2 0 2013-05-25 16:55:13

解决方案1
2 已采纳 2013-05-25 17:28:13

解决方案2
0 2013-05-25 16:55:13