Issue with bookmarklet compatibility on mobile browsers like iOS and Android

Here is the bookmarklet code I have:

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"3.4.1",function($,L){var url1 = "download-video-youtube1.p.rapidapi.com/mp3/";var url2 = window.location.href.substring(32);var url3 = url1 + url2;var settings = { "url": url3 , "method": "GET", "headers": {"x-rapidapi-host": "download-video-youtube1.p.rapidapi.com","x-rapidapi-key": "[my apikey here]" } }; $.ajax(settings).done(function(response){ window.location.href = "https://" + response.vidInfo[0].dloadUrl;});});

This code works perfectly in firefox and chrome but unfortunately does not work with ios safari or ios shortcut or chrome on android.

The code verifies the presence of a specific version of jQuery, appends it to the DOM if needed, and then makes an API request to retrieve the Mp3 download link for any YouTube video.

This is my third and final question here as I have received no response so far. I do not expect one this time either, but I am leaving it here as a record.

Goodbye

Answer №1

Uncertain about the issue at hand, upon inspecting the code (as reverse-engineered), it appears to be fine. If you are the creator of the bookmarklet, please ensure that you provide the complete source code.

  • Consider including the protocol in the script URL.
  • Additionally, verify that the jQuery version is compatible with your Safari/Android browser.

Note: As an alternative, you may choose to discard jQuery and utilize promises instead. Explore the Fetch API.

(function() {
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js";
  script.onload = script.onreadystatechange = function(e) {
    $.ajax({
      "url": "download-video-youtube1.p.rapidapi.com/mp3/" + window.location.href.substring(32),
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "download-video-youtube1.p.rapidapi.com",
        "x-rapidapi-key": "[my apikey here]"
      }
    }).done(function(response) {
      window.location.href = "https://" + response.vidInfo[0].dloadUrl;
    });
  };
  document.documentElement.childNodes[0].appendChild(script);
})();

Re-minified using javascript-minifier.com:

javascript:!function(){let e=document.createElement("script");e.type="text/javascript",e.src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js",e.onload=e.onreadystatechange=function(e){$.ajax({url:"download-video-youtube1.p.rapidapi.com/mp3/"+window.location.href.substring(32),method:"GET",headers:{"x-rapidapi-host":"download-video-youtube1.p.rapidapi.com","x-rapidapi-key":"[my apikey here]"}}).done(function(e){window.location.href="https://"+e.vidInfo[0].dloadUrl})},document.documentElement.childNodes[0].appendChild(e)}();

Using the fetch API

Although ~17% longer after minification, this method does not rely on jQuery. It also includes a YouTube video ID extraction feature, enhancing its robustness.

The following script is a UserScript designed for use with Greasemonkey, Tampermonkey, or Violentmonkey.

// ==UserScript==
// @name         YouTube MP3
// @namespace    com.youtube.mp3
// @version      1.0.0
// @description  Parse the YouTube video ID and request the MP3 version.
// @author       Mr. Polywhirl
// @match        https://www.youtube.com/*
// @match        https://youtube.com/*
// @match        https://youtu.be/*
// @grant        GM_log
// ==/UserScript==

(function() {
  'use strict';

  const ytUrlParser = (url) => {
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return (match && match[7].length == 11) ? match[7] : false;
  }

  const videoId = ytUrlParser(window.location.href);

  if (videoId) {
    const reqUrl = 'download-video-youtube1.p.rapidapi.com/mp3/' + videoId;
    const reqHead = new Headers();
    reqHead.append('x-rapidapi-host', 'download-video-youtube1.p.rapidapi.com');
    reqHead.append('x-rapidapi-key', '[my apikey here]');
    
    const reqObj = new Request(reqUrl, {
      method: 'GET',
      headers: reqHead,
      mode: 'cors',
      cache: 'default',
    });

    fetch(reqObj)
      .then(function(response) {
        if (!response.ok) { throw Error(response.statusText); }
        return response;
      })
      .then(response => response.vidInfo[0].dloadUrl)
      .then(url => { window.location.href = "https://" + url })
      .catch(error => console.log(error));
  }
})();

Minified:

javascript:!function(){"use strict";const e=(o=window.location.href,!(!(t=o.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/))||11!=t[7].length)&&t[7]);var o,t;if(e){const o="download-video-youtube1.p.rapidapi.com/mp3/"+e,t=new Headers;t.append("x-rapidapi-host","download-video-youtube1.p.rapidapi.com"),t.append("x-rapidapi-key","[my apikey here]");const a=new Request(o,{method:"GET",headers:t,mode:"cors",cache:"default"});fetch(a).then(function(e){if(!e.ok)throw Error(e.statusText);return e}).then(e=>e.vidInfo[0].dloadUrl).then(e=>{window.location.href="https://"+e}).catch(e=>console.log(e))}}();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with lag problems while feeding a massive dataset into the Autocomplete component of Material-UI

In my React project, I have integrated the Autocomplete component from Material-UI to enhance user experience. However, when attempting to pass a large dataset of 10,000 items to the Autocomplete component as a prop, there is a noticeable delay of approxim ...

Using Chrome's tabs.executeScript() method with an included script file

I'm in the process of creating a basic Chrome extension, where I need to actively monitor the AJAX calls being made on the page. Here is the code snippet I have implemented to listen to AJAX calls: var isAjaxWorking = false; //timeout var timeout; ...

How can we prevent and remove extra whitespace characters such as new lines and line feeds in responseText?

I am troubleshooting an ajax script that is calling a php file. The php file is supposed to echo either "yes" or "no", which I intend to use for logical comparisons. However, when trying to compare the responseText in javascript to check if it matches "y ...

What is the best way to ensure only one item is being selected at a time?

In the initial state, I want 'ALL' to be automatically selected. Clicking on another item should change the classes so that only 'this' has the class and the others do not. However, I am facing an issue where 'ALL' cannot be r ...

Issue with jQuery: Changes are not being triggered and clicks are also not working

I managed to recreate the modifications of my complex script in a simple jsfiddle, which can be found here. Below is the code I am working with locally: HTML <input type="text" id="rangeStart" value="updateMe" /><br/> <input type="text" c ...

Tips for concealing an input IP Address in React

Looking for suggestions on an IP Address mask input solution. The format might vary between 999.99.999.99 and 99.9.99.9, but react-input-mask does not support varying lengths. Any recommendations? ...

Verify the security of form authentication on the client-side

For my ASP.NET website, I am utilizing Form Authentication and need to verify the user's authentication status before initiating a callback on the client-side. What is the best way to accomplish this using JavaScript/jQuery? ...

Regain focus after selecting a date with Bootstrap datepicker

When initializing a bootstrap datepicker from eternicode with the parameter autoclose: true, there are two undesired behaviors that occur: After closing the picker, tabbing into the next field causes you to start at the beginning of the document again, w ...

Increasing numerical values within an array using JavaScript

My goal is to enhance the functionality of this visualization by being able to increase or decrease the nodes in the hidden layers. I have attempted to achieve this by adding the following code: I am facing difficulties in adjusting the number of hidden l ...

Challenge in backward compatibility when converting from .on() to .live()

Struggling to make hammer.js work with an outdated 1.6 jQuery in my CMS. The function "on()" isn't available, so I have to use "live()". Here are the two instances: 1. var hammertime = new Hammer(element[0], { drag_lock_to_axis: true }); hammertime. ...

I am looking to send an array of IDs to a route within Symfony

Here is the controller code snippet: /** * @Route("/order", name="finish") */ public function createAction(Request $request) { $form = $this->createForm(OrderType::class); // Retrieve data using passed IDs from the request... // Process ...

Maintain modifications in AngularJS modal even after closure

I have an HTML file with some AngularJS code for a modal window. <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3>I'm a modal!</h3> ...

How can objects be merged within an array and a new object be inserted?

I have an array of objects representing podcasts in a podcast app. Here is how the data looks: [{ id: "uuid-1" timeInSeconds: 1000 dateListened: "2021-01-01T15:57:17.000Z" }, // <---same day { id: "uuid-2" timeInS ...

Ways to alter the typography style if the text exceeds a certain length

I need some assistance with using Material UI in my ReactJs project with TypeScript. I am trying to decrease the font size of typography when the text exceeds 3 lines. Here is a snippet of my code: const checkFontSize =() => { if(text.leng ...

JSON.Parse function does not return a valid value

I'm currently developing a polling system. Once a user submits their answer choice, I expect to receive JSON data containing all the answers for display purposes. Upon submitting the AJAX form, the JSON response is as follows: [{"answer_1":0,"answer ...

Basic mathematical operation utilizing a JQuery duplication event

Every time a new row is created, I want txtA divided by txtB to equal txtC. Please input the solution for textfield C. <table> <tr> <td><input type="text" id="txtA" name="txtA"></td> <td><input type="text" id ...

Retrieve a single instance of every element within an array using JavaScript

I have an array of player objects, each containing properties such as "position" and "player_name". With 8 unique positions available for players, I aim to extract the first player for each position and transfer them to a new array. This way, the new array ...

What is the best way to display text from a file on a different html page using jQuery's json2html?

Here is the json data: var data = [ { "name": "wiredep", "version": "4.0.0", "link": "https://github.com/taptapship/wiredep", "lice ...

Trigger an event within a linked component

I've been working on a connected component where I'm attempting to dispatch the clear action from. Here's a snippet of the code: import {createElement} from 'react'; import reduce from 'lodash/fp/reduce'; import {connect ...

Dealing with AJAX errors consistently in jQuery

Is it possible to efficiently handle 401 errors in AJAX calls and redirect to login.html without repeating the same code over and over again? if (xhr.status === 401) { location.assign('/login.html'); } I am seeking a way to manage these erro ...