Chrome 扩展程序中的上下文菜单

     2023-02-19     69

关键词:

【中文标题】Chrome 扩展程序中的上下文菜单【英文标题】:Context menus in Chrome extensions 【发布时间】:2012-11-26 20:04:18 【问题描述】:

我已经搜索并搜索了此问题的解决方案,但我遇到的每个来源似乎都假设我已经对 Chrome 扩展程序有深入的了解,甚至是 Google 的帮助页面

我了解 Chrome 扩展程序的基本知识,并使用一些基本内容脚本制作了一个。不过,现在我想做一个涉及上下文菜单的菜单。

假设当您突出显示单词并右键单击它们时,您会看到选项Search '<highlighted words>' on Google,单击时会在新选项卡中打开http://www.google.com/search?q=<highlighted words>。我知道这存在于 Chrome 中,并且我确信已经有十亿个扩展复制它,但这只是我构建的一个示例。

我该怎么做?

【问题讨论】:

你错过了这个教程,这正是你的问题tomoprogramming.blogspot.fr/2013/08/… 问题发表于2012年。教程2013年。不能错过不存在的东西。 【参考方案1】:

Manifest v3 已发布,因此为了改进 Lucas Mendonca 的回答,您只需将 manifest.json 更改为:


    "manifest_version": 3,
    "name": "App name",
    "version": "1.0",
    
    "permissions": ["contextMenus"],
    "background":  
        "service_worker": "background.js",
        "persistent": false
    

【讨论】:

【参考方案2】:

改进了 ahnquan 的答案,因此不会在每个后台脚本调用中调用 chrome.contextMenus.create,并且还将 highlighted text 编码为 URI,因此当它包含特殊字符(例如 ;,/?:@&=+$)时它不会中断。

您的 background.js 将如下所示:

chrome.runtime.onInstalled.addListener(function() 
    chrome.contextMenus.create(
        "title": 'Search Google for "%s"',
        "contexts": ["selection"],
        "id": "myContextMenuId"
    );
);
    
chrome.contextMenus.onClicked.addListener(function(info, tab) 
    chrome.tabs.create(  
        url: "http://www.google.com/search?q=" + encodeURIComponent(info.selectionText)
    );
)

还有 manifest.json:


    "manifest_version": 2,
    "name": "App name",
    "version": "1.0",
    
    "permissions": ["contextMenus"],
    "background":  
        "scripts": ["background.js"],
        "persistent": false
    

【讨论】:

【参考方案3】:

Bartlomiej Szalach 的回答太老了。它不适用于 Chrome 版本 80.0.3987.163(2020 年 4 月)。

根据文档,

onclick:单击菜单项时回调的函数。活动页面不能使用这个;相反,他们应该为 contextMenus.onClicked 注册一个监听器。

background.js应该修改如下:

const CONTEXT_MENU_ID = "MY_CONTEXT_MENU";
function getword(info,tab) 
  if (info.menuItemId !== CONTEXT_MENU_ID) 
    return;
  
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create(  
    url: "http://www.google.com/search?q=" + info.selectionText
  );

chrome.contextMenus.create(
  title: "Search: %s", 
  contexts:["selection"], 
  id: CONTEXT_MENU_ID
);
chrome.contextMenus.onClicked.addListener(getword)

【讨论】:

一个很好的答案,但我很确定 Chrome 会抛出,因为 chrome.contextMenus.create 将在每次调用后台脚本时被调用(考虑到每次调用都使用相同的 ID)将导致错误。【参考方案4】:

脚本应如下所示:

function getword(info,tab) 
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create(  
    url: "http://www.google.com/search?q=" + info.selectionText
  );

chrome.contextMenus.create(
  title: "Search: %s", 
  contexts:["selection"], 
  onclick: getword
);

还有 manifest.json:


    "name": "App name",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Your description",
    "permissions": [
      "contextMenus"
     ],
    "background":  
      "scripts": ["script.js"]
    

这里有如何加载扩展:http://developer.chrome.com/extensions/getstarted.html

【讨论】:

将这两个文件(manifest.json 和 script.js)放在一个文件夹中。就是这样! 完美运行。我找不到这么简单的解释。谢谢! 这个答案来自 2012 年。现在是 2018 年,我注意到 chrome.contextMenus 现在在内容脚本中未定义,它仅适用于后台脚本。

文件应用程序中的 Apple FileProvider 扩展从文档浏览器上下文菜单操作中删除复制、重复操作

】文件应用程序中的AppleFileProvider扩展从文档浏览器上下文菜单操作中删除复制、重复操作【英文标题】:AppleFileProviderextentioninFileApplicationremoveCopy,Duplicateoperationfromdocumentbrowser\'scontextmenuaction【发布时间】:2018-02-1409:09:44【问题... 查看详情

使用 chrome 扩展在谷歌文档的上下文菜单上添加新项目

】使用chrome扩展在谷歌文档的上下文菜单上添加新项目【英文标题】:Addinganewitemongoogledocument\'scontextmenuusingchromeextension【发布时间】:2020-02-0108:36:14【问题描述】:现在我正在尝试制作一个控制谷歌文档的谷歌浏览器扩展。我... 查看详情

在 chrome 扩展中显示通知

...第一个chrome扩展程序。在我的chrome扩展中,我在右键单击上下文菜单中添加了一个选项。chrome.contextMenus.create("id":"MyExntesion","title":"MyExtension","type":"no 查看详情

chrome 包应用程序中的 eval

...在从chrome扩展程序调用时会引发错误:未捕获的错误:此上下文不允许从字符串生成代码 查看详情

chrome怎么显示菜单栏

chrome怎么显示菜单栏chrome没有菜单栏,只有书签栏,书签栏实在浏览器界面上角显示,可以在设置里开启。具体操作请参照以下步骤,演示软件版本为chrome浏览器75.0.3770.80。1、首先在电脑上打开chrome浏览器,在浏览器界面为发... 查看详情

azure devops vsts 扩展动态上下文菜单,子菜单未正确加载

】azuredevopsvsts扩展动态上下文菜单,子菜单未正确加载【英文标题】:azuredevopsvstsextensionsdynamiccontext-menuwithchildmenunotloadingproperly【发布时间】:2021-11-3019:44:46【问题描述】:我正在尝试开发一个扩展程序,允许我打开工作项上下... 查看详情

Chrome 扩展程序是不是可以访问本地存储?

...】:2011-01-1007:37:45【问题描述】:是否可以在chrome扩展的上下文中以浏览器重启后可访问的方式存储数据?【问题讨论】:【参考方案1】:比这更简单:阅读:varmyStoredValue=localStorage["The 查看详情

自己写一个chrome扩展程序-右键菜单扩展(代码片段)

最近在学习Spring,心想dotnet如何实现类似形式呢。于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很。于是只好找网上教程了。发现系统的文章不多。Terrylee好多文章似乎都旧了,只好回头来看官方的文档。英文呀!... 查看详情

如何在 Chrome 扩展程序中禁用同源策略?

...2011-08-2810:27:27【问题描述】:也许有一些设置可以在扩展上下文中禁用它。因为我正在开发一个扩展,所以我应该有责任不去实现自己的目标。在开发浏览器扩展时摆弄这个完全不合情理的安全问题是非常令人沮丧的。我不想通... 查看详情

chrome浏览器怎么导出已安装的扩展程序为crx文件

我们都知道,如今Chrome浏览器的应用商店都打不开,进不去了,需要翻出去才能上。所以对于一些已经安装过的扩展程序(插件)想导出保存一下。因为Chrome默认安装在C盘,怕重装系统后又要重新安装这些插件了。那么,怎么... 查看详情

由 Chrome 扩展触发的 DOM 事件是不是在主页的上下文中传播?

】由Chrome扩展触发的DOM事件是不是在主页的上下文中传播?【英文标题】:AreDOMeventstriggeredfromaChromeextensionpropagatedinthemainpage’scontext?由Chrome扩展触发的DOM事件是否在主页的上下文中传播?【发布时间】:2013-07-1401:12:03【问题描... 查看详情

对于 10.7 中的应用程序构建,10.5 中未显示上下文菜单

】对于10.7中的应用程序构建,10.5中未显示上下文菜单【英文标题】:Contextualmenunotdisplayedin10.5forapplicationbuildin10.7【发布时间】:2012-02-1011:22:08【问题描述】:我在10.7中创建了一个应用程序,在该应用程序中我使用上下文菜单作... 查看详情

Chrome扩展程序中的无Chrome窗口?

】Chrome扩展程序中的无Chrome窗口?【英文标题】:ChromelesswindowinChromeextension?【发布时间】:2013-08-1720:10:07【问题描述】:所以最近我在Chrome网上应用店中遇到了一个名为TypeFu的Web应用程序。让我吃惊的是他们居然创造了一个真... 查看详情

chrome 扩展的浏览器动作、后台脚本和内容脚本之间通信的上下文和方法?

...chrome扩展的浏览器动作、后台脚本和内容脚本之间通信的上下文和方法?【英文标题】:Contextsandmethodsforcommunicationbetweenthebrowseraction,backgroundscripts,andcontentscriptsofchromeextensions?【发布时间】:2013-06-2200:28:11【问题描述】:我认为ch... 查看详情

Chrome 扩展程序中的 SameSite 警告

】Chrome扩展程序中的SameSite警告【英文标题】:SameSitewarninginChromeExtensions【发布时间】:2020-04-2305:48:45【问题描述】:我们正在开发Chrome扩展程序从没有设置SameSite属性的域中读取cookie将cookie写入没有SameSite属性的域我们在manifest.... 查看详情

我可以在 chrome 扩展中找到带有选定文本的标签吗?

...on?【发布时间】:2012-03-0417:56:23【问题描述】:如果我在上下文菜单中添加了一项:chrome.contextMenus.create("title":chrome.i18n.getMessage("right_click"),"type":"normal", 查看详情

点击appium中的浮动上下文菜单

】点击appium中的浮动上下文菜单【英文标题】:Taponfloatingcontextmenuinappium【发布时间】:2015-04-2513:17:18【问题描述】:我使用appium来测试我的移动应用。使用TouchAction,我可以在edittext上将appium驱动程序转到longpress,以调出允许用... 查看详情

用户通过 chrome 扩展加载时如何隐藏 gmail 收件箱菜单

】用户通过chrome扩展加载时如何隐藏gmail收件箱菜单【英文标题】:HowcanIhidegmailinboxmenuwhenuserloadsviachromeextension【发布时间】:2019-09-0411:39:37【问题描述】:拜托,我需要帮助。我正在尝试创建一个googlechrome扩展程序,当gmail用户... 查看详情