Question:
How to trigger a global click event on a site added to a Wik CLI project
Product:
I am using WikCLI to write an extension application. The specific function is to add the extension to the website, and the entire website can obtain the information of the element currently clicked (for example: the clicked picture/video/text, etc.) by clicking the mouse
What are you trying to achieve:
Trigger a global click event in the extension
What have you already tried:
If you use document.addEventListener(‘click’, handleClick) in the page, the click event is triggered only within the current program scope in preview mode, and the page element recognizes that the current application plug-in is nested in the iframe, and the click event is not triggered elsewhere.
Additional information:
Directory Structure
The elemen.tsx code in the directory is as follows
DOM structure in preview mode
I am new to WikCLI, so please forgive me for being a newbie. If I want to achieve the above requirements, what is the best way to use it? If I use WikBlocks, I think the custom panel definition is not very friendly. I may have a lot of configurations but I don’t want to pull down to display them all. I may want to add tabs to switch, which is not the style I want.
Thank you very much for your answer! But what I want to implement is an application plug-in, which needs to monitor global events, and every project may use it, and it may also be put on the app market. I found that there is no iframe in the project after release, and it is in the iframe when previewing. I don’t know whether it will not exist in the iframe after being put on the app market, so I asked this question.
Thanks again for your reply. I have used the WikCLI document to create a project and then run npm run generate to create a plugin. The approximate directory is shown in the file directory above. I am now facing two problems. The first problem is the click event. I want to achieve that any click in preview mode can trigger the click event in the panel.tsx file. The second problem is that when using the @wix/design-system plugin, I want to achieve a button on the configuration panel. Click the button to pop up a box, similar to the following effect. For these two situations, can you help me with any good solutions?
The floating pop-up box only exists in the right panel of Settings. What I want is any position, similar to the color selection of [
Apps Templates]( Chart Widget) plugin
Hey! If you are still having trouble with the CLI we have a dedicated channel in our Discord server for app dev on the CLI and. you may get some better ideas there Wix Studio Community
1 Like
