0

I am working on a chrome extension that will count selected words.

manifest.json file

  {
     "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 file

  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
     }
  })

it will add an option "count words" on right click. Now I want when I click the count words option a modal appear on the middle of the screen that shows the number of words I have selected.

I can figure out the logic for counting words but don't know how to show the modal on click with some logics.

enter image description here the kind of modal I am looking here.

Basit
  • 327
  • 3
  • 8
  • 19
  • 1
    The screenshot shows an `alert('foo')` type of dialog which can't be customized. If you want to be able to specify size and position, you'll have to use chrome.windows.create, which is not modal. There's no way to have the dialog both modal and customizable. – wOxxOm Mar 12 '19 at 10:17

1 Answers1

0

This particular example is open source, so you can see exactly how he's doing it!

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

Spoiler: it's not a generic modal, just an old-school javascript alert() so it will be text-only.

Other options are using the chrome popups or using a Content Script to access the DOM of the current page and add your own modal however you want (this will require users to grant permissions for you to do this).

Chad
  • 2,064
  • 1
  • 22
  • 29