Problem to launch a bookmarlet

Plugin Development
1

I am extending LipSurf with some personal plugins and I have a problem to launch a bookmarlet.
A bookmarlet is a javascript code fragment that it is saved in Chrome like a bookmark.
My code is trying to execute a macro previusly recorded with the IMacros addon for Chrome.

Thank in advance for your help.

1 Like
2

Can you share the code?

You should use pageFn to run the code that the bookmarklet would normally. But there is no reason to go through the bookmarklet that I can think of - you can execute the js directly.

3

import PluginBase from ‘chrome-extension://lnnmjmalakahagblkkcnjkoaihlfglon/dist/modules/plugin-base.js’;
import ExtensionUtil from ‘chrome-extension://lnnmjmalakahagblkkcnjkoaihlfglon/dist/modules/extension-util.js’;
var SC31_backend_resolved = {
…PluginBase,
niceName:“SC31”,
languages:{},
description:“Ejecuta la Imacro SC31”,
version:“2.11.0”,
match:/.*/,
authors:“Marcos Morata”,
homophones:{call:“call”},
commands:[
{name:“SC31”,description:“Descripción de lo que realiza el Plugin.”,match:“call”,fn:async()=>{var macro = {};
var e_m64 = “VkVSU0lPTiUyMEJVSUx […] zIwNiklMjI=”;
macro.source = decodeURIComponent(atob(e_m64));
alert(macro.source);
var evt = document.createEvent(“CustomEvent”);
evt.initCustomEvent(“iMacrosRunMacro”, true, true, macro);
window.dispatchEvent(evt);}}
]
};

export default SC31_backend_resolved;
LS-SPLITallPlugins.SC31 = (() => { var SC31_0_matching_cs_resolved = {…PluginBase,commands:{“call”:{}}};
return SC31_0_matching_cs_resolved;
})()

LS-SPLITallPlugins.SC31 = (() => { var SC31_0_nonmatching_cs_resolved = {…PluginBase,commands:{“call”:{}}};
return SC31_0_nonmatching_cs_resolved;
})()

4

Sorry, actually could be easier:

macro.source = decodeURIComponent(atob(e_m64));

if I delete the encoding in base 64 :

var macro = {};
macro.source = ‘VERSION BUILD=1005 RECORDER=CR;URL GOTO=https://scratch.mit.edu/projects/editor/;EVENT TYPE=MOUSEDOWN SELECTOR="#react-tabs-1>DIV>DIV>DIV>DIV>DIV>DIV:nth-of-type(2)>DIV>DIV" BUTTON=0;EVENT TYPE=MOUSEMOVE SELECTOR="#react-tabs-1>DIV>DIV>DIV>DIV>DIV>DIV:nth-of-type(2)>DIV>DIV" POINT="(28,153)";EVENT TYPE=MOUSEUP POINT="(28,153)";EVENT TYPE=CLICK SELECTOR="#react-tabs-1>DIV>DIV>DIV>DIV>DIV>DIV:nth-of-type(2)>DIV>DIV" BUTTON=0;EVENT TYPE=MOUSEDOWN SELECTOR="#react-tabs-1>DIV>DIV>DIV>svg:nth-of-type(4)>g>g>g:nth-of-type(79)>path" BUTTON=0;EVENT TYPE=MOUSEUP POINT="(533,180)";EVENT TYPE=CLICK SELECTOR="#react-tabs-1>DIV>DIV>DIV" BUTTON=0;EVENT TYPE=MOUSEDOWN SELECTOR="#react-tabs-1>DIV>DIV>DIV>DIV>DIV>DIV>DIV>DIV" BUTTON=0;EVENT TYPE=MOUSEMOVE SELECTOR="#react-tabs-1>DIV>DIV>DIV>DIV>DIV>DIV>DIV>DIV" POINT="(37,113)";EVENT TYPE=MOUSEUP POINT="(37,113)";EVENT TYPE=CLICK SELECTOR="#react-tabs-1>DIV>DIV>DIV>DIV>DIV>DIV>DIV>DIV" BUTTON=0;EVENT TYPE=MOUSEDOWN SELECTOR="#react-tabs-1>DIV>DIV>DIV>svg:nth-of-type(4)>g>g>g:nth-of-type(58)>text" BUTTON=0;EVENT TYPE=MOUSEUP POINT="(466,206)";’;

5

You’re using fn – this executes in the background/extension context and doesn’t have access to the document. You want to use pageFn so it executes on in the page context. More details here:

https://docs.lipsurf.com/api-reference/command.html#icommand

6

That’s exacty what I thought at first. But if I change “fn” for “pageFn” it doesn’t works. Even if I put only an “alert”:

[…]
commands:[
{name:“SC32”,description:“Descripción de lo que realiza el Plugin.”,match:“call”,pageFn:async()=>{alert(“llega”);[…]

Maybe the problem is at the end:

[…]
var evt = document.createEvent(“CustomEvent”);
evt.initCustomEvent(“iMacrosRunMacro”, true, true, macro);
window.dispatchEvent(evt);
}}
]
};
[…]

By the way: the clause “async”, it is necesary to write it?

Thank U again.

7

Did you try the Hello World plugin in the tutorial? I’ve just verified and it’s working perfectly for me - creating an alert on the page.

What exactly is not working?

  1. Is the plugin building properly? Are you writing it in TypeScript? Any build errors? Does it load and show in the options and help?

(if you aren’t writing it in TS, then I would use the HelloWorld plugin as a starting point for the plain js version);

import PluginBase from 'chrome-extension://lnnmjmalakahagblkkcnjkoaihlfglon/dist/modules/plugin-base.js';import ExtensionUtil from 'chrome-extension://lnnmjmalakahagblkkcnjkoaihlfglon/dist/modules/extension-util.js';/// <reference types="lipsurf-plugin-types"/>
var HelloWorld = { ...PluginBase, ...{
    niceName: 'Hello World',
    languages: {},
    description: 'A "hello world" plugin that works on the lipsurf.com domain.',

    // a RegEx that must match against the current tab's url for the plugin to be active (all of it's commands minus global commands)
    match: /.*\.lipsurf.com/,

    version: '1.0.0',

    commands: [{
            name: 'Respond',
            description: 'Respond with something incredibly insightful to the user.',
            // what the user actually has to say to run this command
            match: 'hello world',
            // the js that's run on the page
            pageFn: function () {
                alert('Hello, Developer!');
            }
        }]
} };

export default HelloWorld;
                          LS-SPLITallPlugins.HelloWorld = (() => { /// <reference types="lipsurf-plugin-types"/>
var HelloWorld = { ...PluginBase, ...{
    commands: {
        "Respond": {
            // the js that's run on the page
            pageFn: function () {
                alert('Hello, Developer!');
            }
        }
    }
} };

return HelloWorld;
 })()

  1. Check the console when you load the plugin (via “load a local plugin” button, any error message there)?

  2. You might have to up the version number of the plugin to install a newer/modified version.

  3. Are you sure the page you’re running it on matches the regex in the plugins match property?

8

Good morning from Spain!

I think I didn’t explain the issue correctly: sorry!!
My plugin works well using “fn” (no with “pageFn”), and it’s able to asign the values to the variables, to calls funcions, to show the “alerts”,… but it fails when I try to launch the bookmarklet:

var evt = document.createEvent(“CustomEvent”);
evt.initCustomEvent(“iMacrosRunMacro”, true, true, macro);
window.dispatchEvent(evt);

And I am sure this code works because it does in a simple .html page:

div {padding:50px; background-color: Tomato; color: white;}

The createEvent() Method

The createEvent() method allows you to simulate any event.

In this example, the red div will get a new star every time you mouse over it:

*

Simulate Mouse Over
9

I think I understand now. Did you look at the console? You can also put a debugger statement in the pageFn and step through it with the console open when you execute the command.

Also, does it work when you put the code in the chrome console (f12) directly?

10

Did you figure this one out?