Build a Chrome Extension with VueJS

It turns out quite easy to build a Chrome Extension. Basically the extension is a web application containing HTML, JS, images, etc. I tried to build a simple extension using VueJS recommended by colleagues.

There’s just 1 limitation that affected me: The eval JS function is disabled in Chrome Extensions for security reasons. That means there will be no dynamic templates, but only pre-compiled Vue components. Here’s the blog which explained in detail:

And this blog has very good instructions on how to start a Chrome Extension development with NPM and Vue:

After all the steps in the above blog are done, I started working on the `app/scripts.babel/popup/Popup.vue` file and adding UI and functions in it while gulp watch is running to rebuild the project when any watched file has been changed. There was 1 issue where gulp can’t watch too many files so here’s the fix:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p


Saving Images in Chrome with Selenium

Here’s how to save images in Chrome browser using Selenium. The API has element.screenshot_as_png() method but apparently it’s not implemented at the moment.

With some minor changes to this answer I can save a image via the browser:

from selenium import webdriver
from PIL import Image

#chrome_options = ...
#chrome = webdriver.Chrome(chrome_options=chrome_options)
#element = chrome.find_element_by_id('some_id')

def save_image(chrome, element, save_path):
  # in case the image isn't isn't in the view yet
  location = element.location_once_scrolled_into_view
  size = element.size

  # saves screenshot of entire page
  # uses PIL library to open image in memory

  image =
  left = location['x']
  top = location['y']
  right = location['x'] + size['width']
  bottom = location['y'] + size['height']
  image = image.crop((left, top, right, bottom))  # defines crop points, 'png')  # saves new cropped image





  1. Chrome的源生Gtk版本
  2. 有一定的第三方插件积累
  3. 图标再改改吧,略显粗糙