"Enhance your browsing experience with the Safari extension's Context

I've been trying to add a context menu with an icon and 3 additional sub menu items to my Safari extension, but I'm struggling to find a way to do it. Is it even possible to achieve this in Safari extensions?

Answer №1

If you want to enhance your context menu, consider adding an icon as shown in the image on the Turn Off the Lights blog post about the Safari extension:

https://i.sstatic.net/Jo400.png

lampmenu = safari.extension.createMenu("lampmenu");
sharemenu = safari.extension.createMenu("sharemenu");
lampmenu.appendMenuItem("totl", "Turn Off the Lights");
lampmenu.appendSeparator();
lampmenu.appendMenuItem("welcomeguide", "Welcome Guide");
lampmenu.appendMenuItem("supportdev", "Support Development");
var itemrate = lampmenu.appendMenuItem("ratethis", "Rate this extension");
itemrate.image = safari.extension.baseURI + "images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e486968b93978196bb97908596a4d69cca948a83">[email protected]</a>";

To view the source code for the open-source Turn Off the Lights Safari extension, visit: https://github.com/turnoffthelights/

Answer №2

In my personal experience, I have found that it is impossible to include an icon in a context menu item or create a second level menu (sub menu) in the context menu. The Extension Builder for Safari browser does not provide an option to set an icon for this purpose.

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

Using Typescript to pass the setState function as a parameter

Consider the scenario below: // external file export const specificFunction = setState => { setState({ value: "some new string" }) } // component's file import { specificFunction } from "pathToFile" interface TState { ...

challenges encountered when saving a getjson request as a variable

I am experiencing difficulties in retrieving a variable from a getJSON() request. The issue lies within the following three functions: function getPcLatitude() { // onchange var funcid = "get_postcode_latitude"; var postcode = parseInt($('#i ...

Ensuring secure headers in Node.js backend for enhanced security

Is it secure to send user login data through authentication headers for a login API endpoint? The authorization headers contain an object encoded in Base64 with user data like username, hashed password (not yet hashed in the code), and a server key for c ...

The dynamic data is not displaying on the Chart bundle JavaScript

I am currently utilizing chart bundle js for my project. While everything appears to be functioning properly on alter show, I am encountering an issue with the map display – nothing is showing up as intended. If anyone has a solution to resolve this iss ...

What's the most effective method for incorporating lengthy HTML snippets into a single-page application?

As I develop a simple single page application, the focus remains on a few user views to manage local storage data without using any templating framework. Although it's primarily JavaScript/jQuery right now, the thought of incorporating Backbone or ano ...

Trouble with HTML Contact Page Email Delivery

Hello there, I recently set up a contact page for my html website but unfortunately, it's not sending the messages to my email as expected! You can see what I mean in this screenshot -> https://i.stack.imgur.com/2xPXw.png I'm a bit puzzled b ...

Ways to choose an element when all classes are identical but the text content varies?

I'm looking to automate the website, specifically by selecting the Widgets section and clicking on it. The issue is that all the cards have the same class name, only the text inside them differs. I tried using this code snippet: get getWidgetButton() ...

Transferring data-id to a Bootstrap modal without the use of jQuery

I've come across numerous questions similar to this, all suggesting the same solution of using JQuery. However, incorporating JQuery into my Reactjs project just to pass an id to a modal is something I wish to avoid. Below is my code snippet : <! ...

A guide to dynamically display input fields according to the selected mat-radio button in Angular Material

I am currently utilizing angular material version 9.2.4 Within my project, I am implementing the angular material mat radio button with an input field. Each payment method will have its own corresponding input field. When the 'Cash' option is se ...

Setting limits on values in jQuery

Hello everyone, I'm trying to establish a limit for each progress bar within Bootstrap 4 that triggers upon clicking. The issue lies in the fact that every time I click, the value always jumps to 100. Is there a way to set a maximum value for each p ...

Unable to locate the requested document using the provided query string parameter

Searching for a specific document in my database using a query string referencing a user_id from a profile schema: ProfileSchema = Schema( user_id: type: Schema.Types.ObjectId vehicules: [VehiculeSchema] home: {type:Schema.Types.ObjectId, ref: &apos ...

Unable to display HTML content on a page using the foreach callback in JavaScript

I have a function that iterates through each element of an array and generates HTML content on the page while updating some properties using elements from the array. I am utilizing forEach to iterate over the elements of the array and innerHTML to display ...

Can you please explain the meaning of "!" in JavaScript as it pertains to my explanation?

I comprehend how the exclamation mark is used in code such as != or !==, but I am curious about its meaning when it precedes something like if(!arr[i]){"do this} Appreciate your response. ...

showcase fresh material using the jquery fancybox

I have a fancybox popup using jQuery that is functioning as intended. Inside the popup, there is a link <a href="http://example.com/foo/bar.html">show another content of this fancybox</a> However, when you click on the link, the fancybox disap ...

Using the v-for directive in Vue.js to loop through an array and display

Looking at the image provided, I am trying to access the content. I attempted to do so using element.comments.content, but it did not seem to work as expected. Here is the snippet of code: <div class="fil-actualites-container"> <div cl ...

Global installation of npm packages: Step-by-step guide

I've been interested in trying out Vue.js, but I'm struggling to figure out how to integrate it into my project. Is there a way to install the dependencies without requiring an internet connection to download them again, especially when they&apos ...

Utilizing KnockoutJS to create an observable array of objects with data retrieved from a SQL server

Currently, I am in the process of creating a proof of concept for a web application. I am seeking guidance on how to accomplish this goal. The data retrieved from an SQL server API consists of a class with a basic structure: public partial class ReqsTe ...

The server is converting numeric JSON data types to strings

Currently, I am loading a CSV file, parsing it into a JSON object, and then converting the strings into numbers. Although these are displayed as numbers in the browser console, when I send the data to the server using AJAX, everything is interpreted as str ...

Pressing ctrl and clicking on a link created with the tag element in VueJS will activate

When using a router link without an anchor tag, I am able to ctrl+click the link to open it in a new tab. However, when used with a tag (e.g., tag="td"), the ctrl+click functionality no longer works. The same issue occurs with clickable elements generated ...

Employ Jquery for arranging WordPress posts based on a custom numerical value on a webpage

Recently, I came across this amazing plugin called , which allows me to filter posts on my website. In order to enhance the functionality of my create post form, I utilized the "Advanced Custom Fields" plugin and followed their documentation available at ...