Trying to create a key to display hints on youtube videos and add them to watch later playlist

[Fred-Vatin]

Hi,

Goal

For instance, while you’re at https://www.youtube.com/feed/subscriptions, a key would display a hint on every visible videos #action ytd-thumbnail then add them to watch later playlist.

The problem is the watch later button only insert in the DOM on a mouseover event. When breaking on the node #hover-overlays, we can access the button at ytd-thumbnail-overlay-toggle-button-renderer[aria-label="Watch later"].

Running the code

Fortunately, this extension exists. It works perfectly. But his goal is to add the current playing video to the watch later playlist. So I converted this as a function that should work with SurfingKeys and do what I want. It pretends to be Youtube to send a valid request.

Here is the code:

mapkey(
  "ay",
  "#14Add/Remove multiple videos to watch later playlist",
  function () {
    Hints.setCharacters("dsjkl");

    Hints.create(
      "#content ytd-thumbnail > a#thumbnail, ytd-watch-metadata",
      function (element) {
        if (!element) {
          Front.showPopup(
            "It seems there is no video that can be added to watch later in this page.\n\nElement not found: #content ytd-thumbnail > a#thumbnail"
          );

          return;
        }

        // Get video ID from listed videos or the current playing
        const videoId = element.href?.split("v=")[1] || element.getAttribute("video-id");

        // add to watch later
        insertJS(executeYouTubeCommand("add-to-watch-later", videoId), function () {
          console.log(`executeYouTubeCommand("add-to-watch-later") : FINISHED !`);
        });

        Hints.setCharacters("fdsjkl");
      },
      { multipleHits: false }
    );
  },
  { domain: /youtube.com/i }
);

/**==========================================================================
* ℹ				FUNCTIONS
===========================================================================*/
// action can be "add-to-watch-later" || "remove-from-watch-later"
function executeYouTubeCommand(action, videoId) {
  const getAddVideoParams = (videoId) => ({
    clickTrackingParams: "",
    commandMetadata: { webCommandMetadata: { sendPost: true, apiUrl: "/youtubei/v1/browse/edit_playlist" } },
    playlistEditEndpoint: {
      playlistId: "WL",
      actions: [{ addedVideoId: videoId, action: "ACTION_ADD_VIDEO" }],
    },
  });

  const getRemoveVideoParams = (videoId) => ({
    clickTrackingParams: "",
    commandMetadata: { webCommandMetadata: { sendPost: true, apiUrl: "/youtubei/v1/browse/edit_playlist" } },
    playlistEditEndpoint: {
      playlistId: "WL",
      actions: [{ action: "ACTION_REMOVE_VIDEO_BY_VIDEO_ID", removedVideoId: videoId }],
    },
  });

  const sendActionToNativeYouTubeHandler = (getParams) => {
    const appElement = document.querySelector("ytd-app");

    if (!videoId) {
      Front.showPopup("Fails to get videoId.");

      return;
    }

    if (!appElement) {
      Front.showPopup("Fails to get 'ytd-app'");

      return;
    }

    const timeout = 2500;

    // Notify found Id
    Front.showBanner(`Video ID found: ${videoId}`, timeout);

    const event = new window.CustomEvent("yt-action", {
      detail: {
        actionName: "yt-service-request",
        returnValue: [],
        args: [{ data: {} }, getParams(videoId)],
        optionalAction: false,
      },
    });

    // appElement is the Native YouTube Handler
    appElement.dispatchEvent(event);
  };

  try {
    if (action === "add-to-watch-later") {
      sendActionToNativeYouTubeHandler(getAddVideoParams);
    }
    if (action === "remove-from-watch-later") {
      sendActionToNativeYouTubeHandler(getRemoveVideoParams);
    }
  } catch (error) {
    Front.showPopup(`Error while sending message to native YouTube handler:\n${error}`);
  }
}

Unfortunately, when running the action on any valid YouTube page like https://www.youtube.com/feed/subscriptions the console returns this error:

It is as if my function doesn’t to run with the same permission set in the youtube-watch-later-shortcut-ext manifest.

{
  "permissions": [
    "scripting",
    "tabs"
  ]
}

But SurfingKeys has also those permissions in its manifest v3 (used in chrome) or equivalent in v2 (Firefox which I currently use).

insertJS

I tried to use insertJS api.

insertJS(executeYouTubeCommand("add-to-watch-later", videoId), function (e) {
  console.log("Add to watch later : ", e);
});

executeYouTubeCommand is executed but I think I use this the wrong way because same permission denied error and the <script> added is empty and undefined.

Failed to load element <script> where source is “https://www.youtube.com/feed/undefined”.

The onload function doesn’t run.

Permission denied error again if I use:

insertJS(
function executeYouTubeCommand(action, videoId) {
	const getAddVideoParams = (videoId) => ({
		clickTrackingParams: "",
		commandMetadata: { webCommandMetadata: { sendPost: true, apiUrl: "/youtubei/v1/browse/edit_playlist" } },
		playlistEditEndpoint: {
			playlistId: "WL",
			actions: [{ addedVideoId: videoId, action: "ACTION_ADD_VIDEO" }],
		},
	});

	const getRemoveVideoParams = (videoId) => ({
		clickTrackingParams: "",
		commandMetadata: { webCommandMetadata: { sendPost: true, apiUrl: "/youtubei/v1/browse/edit_playlist" } },
		playlistEditEndpoint: {
			playlistId: "WL",
			actions: [{ action: "ACTION_REMOVE_VIDEO_BY_VIDEO_ID", removedVideoId: videoId }],
		},
	});

	const sendActionToNativeYouTubeHandler = (getParams) => {
		const appElement = document.querySelector("ytd-app");

		if (!videoId) {
			Front.showPopup("Fails to get videoId.");

			return;
		}

		if (!appElement) {
			Front.showPopup("Fails to get 'ytd-app'");

			return;
		}

		const timeout = 2500;

		// Notify found Id
		Front.showBanner(`Video ID found: ${videoId}`, timeout);

		const event = new window.CustomEvent("yt-action", {
			detail: {
				actionName: "yt-service-request",
				returnValue: [],
				args: [{ data: {} }, getParams(videoId)],
				optionalAction: false,
			},
		});

		// appElement is a youtube stuff
		appElement.dispatchEvent(event);
	};

	try {
		if (action === "add-to-watch-later") {
			sendActionToNativeYouTubeHandler(getAddVideoParams);
		}
		if (action === "remove-from-watch-later") {
			sendActionToNativeYouTubeHandler(getRemoveVideoParams);
		}
	} catch (error) {
		Front.showPopup(`Error while sending message to native YouTube handler:\n${error}`);
	}
}, function() {
      executeYouTubeCommand("add-to-watch-later", videoId);
      console.log(`executeYouTubeCommand("add-to-watch-later") : FINISHED !`);
}
);

But the onload function is executed.

Runtime

I tried

  RUNTIME(
    "executeScript",
    { code: executeYouTubeCommand("add-to-watch-later", videoId) },
    (response) => {
      console.log(`executeYouTubeCommand("add-to-watch-later") : FINISHED !`, response);
    }
  );

Same permission error. Code is supposed to be a string but if I run:

{ code: `executeYouTubeCommand("add-to-watch-later", videoId)` },

the function is not executed. Only the callback runs.

Even if I put the function definition like:

code: `executeYouTubeCommand("add-to-watch-later", videoId);
function executeYouTubeCommand(action, videoId) {
  const getAddVideoParams = (videoId) => ({
    clickTrackingParams: "",
    commandMetadata: { webCommandMetadata: { sendPost: true, apiUrl: "/youtubei/v1/browse/edit_playlist" } },
    playlistEditEndpoint: {
      playlistId: "WL",
      actions: [{ addedVideoId: videoId, action: "ACTION_ADD_VIDEO" }],
    },
  });

  const getRemoveVideoParams = (videoId) => ({
    clickTrackingParams: "",
    commandMetadata: { webCommandMetadata: { sendPost: true, apiUrl: "/youtubei/v1/browse/edit_playlist" } },
    playlistEditEndpoint: {
      playlistId: "WL",
      actions: [{ action: "ACTION_REMOVE_VIDEO_BY_VIDEO_ID", removedVideoId: videoId }],
    },
  });

  const sendActionToNativeYouTubeHandler = (getParams) => {
    const appElement = document.querySelector("ytd-app");

    if (!videoId) {
      Front.showPopup("Fails to get videoId.");

      return;
    }

    if (!appElement) {
      Front.showPopup("Fails to get 'ytd-app'");

      return;
    }

    const timeout = 2500;

    // Notify found Id
    Front.showBanner("Video ID found: " + videoId, timeout);

    const event = new window.CustomEvent("yt-action", {
      detail: {
        actionName: "yt-service-request",
        returnValue: [],
        args: [{ data: {} }, getParams(videoId)],
        optionalAction: false,
      },
    });

    // appElement is a youtube stuff
    appElement.dispatchEvent(event);
  };

  try {
    if (action === "add-to-watch-later") {
      sendActionToNativeYouTubeHandler(getAddVideoParams);
    }
    if (action === "remove-from-watch-later") {
      sendActionToNativeYouTubeHandler(getRemoveVideoParams);
    }
  } catch (error) {
    Front.showPopup("Error while sending message to native YouTube handler:\n" + error};
  }
}` },

[Fred-Vatin]

Hello @b0o, I saw you’re pretty skilled with SurfingKeys and maybe browser extensions in general. Would you have a hint to share about this error.