时间戳

首页 > 解决方案 > chrome 扩展，如何从 contextMenus 选项显示模式

javascript - chrome 扩展，如何从 contextMenus 选项显示模式

问题描述

我正在开发一个可以计算所选单词的 chrome 扩展。

manifest.json 文件

  {
     "manifest_version": 2,
     "name": "Word Counter",
     "description": "To count article words",
     "version": "1.0.0",
     "icons": {
        "128": "icon_128.png"
     },

     "background": {
        "scripts": [
           "eventPage.js"
        ],
        "persistent": false
     },
     "permissions": [
        "activeTab",
        "contextMenus"
     ]
  }

eventPage.js 文件

  let contextMenuItem = {
     "id": "countWords",
     "title": "count words",
     "contexts": ["selection"]
  }

  chrome.contextMenus.create(contextMenuItem)

  chrome.contextMenus.onClicked.addEventListener((selectedData) => {
     if (selectedData.menuItemId == 'countWords' && selectedData) {
          //What would be the logic
     }
  })

它将在右键单击时添加一个选项“计数单词”。现在我希望当我单击计数单词选项时，屏幕中间会出现一个模式，显示我选择的单词数。

我可以弄清楚计算单词的逻辑，但不知道如何使用一些逻辑在点击时显示模态。

在此处输入图像描述 我在这里寻找的那种模态。

标签： javascriptgoogle-chromegoogle-chrome-extensionmanifest.json

解决方案

这个特定的例子是开源的，所以你可以确切地看到他是如何做到的！

https://github.com/Steven-Roberts/Word-Counter-Plus/blob/d5de6f9840d3b772e916c582160160a6e1f01cb6/src/background.js#L32-L36

剧透：它不是通用模式，只是一个老式的 javascript alert()，所以它是纯文本的。

其他选项是使用 chrome弹出窗口或使用内容脚本来访问当前页面的 DOM，并根据需要添加您自己的模式（这将需要用户授予您执行此操作的权限）。

推荐阅读