[Angular 2 Tutorial] Chrome Extension Tutorial – 22 – Creating Context Menu [w/ subs]



00:00:02 – [Music]
00:00:12 – it needs to run in the background and
00:00:14 – not when we click on the pop-up HTML in
00:00:17 – the toolbar and we need the context menu
00:00:20 – to appear only when we select some
00:00:23 – number on the webpage therefore what we
00:00:26 – need is an event page and not a
00:00:29 – background page so let's see how to
00:00:31 – create a context menu now to let the
00:00:34 – extension know that we are using an
00:00:35 – event page we first need to specify that
00:00:37 – in the manifest file so over here below
00:00:41 – options I'm going to say background this
00:00:45 – is going to be an object we're going to
00:00:47 – have a property called script and this
00:00:49 – is going to for now be an array that
00:00:52 – contains a single script and that is
00:00:54 – going to be even page GS and the second
00:00:57 – property is persistent and this
00:01:01 – basically indicates whether we are
00:01:04 – specifying a background page or an event
00:01:07 – page if persistent is false then it's an
00:01:10 – event page now the last thing to do in
00:01:14 – the manifest file is to request for
00:01:16 – permissions for the context menu so
00:01:18 – we're here context menu so now we can go
00:01:24 – ahead and create this even page yes so
00:01:27 – new file event page yes all right now we
00:01:33 – are going to first create a context menu
00:01:35 – item so this is going to be an object
00:01:38 – context menu item now we need to specify
00:01:43 – an ID so this is going to be let's say
00:01:47 – spend money and then we are also going
00:01:51 – to have to specify a title and this is
00:01:53 – basically what appears and may
00:01:55 – right-click on the webpage so let's call
00:01:58 – this spend money as well so by the time
00:02:00 – it capital it with uppercases spend
00:02:03 – money and then finally we specify the
00:02:07 – context where this is supposed to appear
00:02:10 – for now we are going to have to make
00:02:13 – this up here only when the user selects
00:02:16 – something on the webpage so the context
00:02:18 – is selection you can also have different
00:02:20 – contexts like when there is a click on
00:02:23 – an image or there is a video
00:02:26 – and for more of this context I would
00:02:28 – recommend you to go through the chrome
00:02:30 – developer web page right now that we
00:02:33 – have this object we can use a method
00:02:35 – chrome dot context menu menus dot create
00:02:42 – and we specify this object so let me
00:02:45 – just copy this and paste it so now let's
00:02:50 – save this save the manifest let's reload
00:02:54 – our extension because we change the
00:02:55 – manifest
00:02:56 – so reload when trying to install
00:02:59 – permission context menu is not known
00:03:01 – okay context menus let's save this and
00:03:04 – reload this and now let's go over here
00:03:09 – and let me select an integer value so
00:03:11 – let's say 28 and when I right click I
00:03:14 – get this pend money context menu so you
00:03:18 – see this this was not that before so of
00:03:21 – course this doesn't do anything right
00:03:23 – now but what we ideally want that what
00:03:26 – we ideally want is when we click on
00:03:28 – spend money this 28
00:03:31 – [Music]


Video Url:
http://youtu.be/FwF_iByEMOs

Comments

comments