• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

bluzi/chrome-extension-execute-on-website: Access JS on web pages directly throu ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

bluzi/chrome-extension-execute-on-website

开源软件地址:

https://github.com/bluzi/chrome-extension-execute-on-website

开源编程语言:

JavaScript 100.0%

开源软件介绍:

chrome-extension-execute-on-website

It is a long name, but it will self-explanatory so, its worth

Or is it?...

What is it?

It turns out that Chrome extensions does not have access to the JavaScript on a webpage, even if the extension is a content script. As a result, you can't access variables and content on the page itself.

It's disapointing. Anyway, there is a solution, you have to inject a script tag to the page and then execute whatever you want in this script. You may ask yourself what is the problem? It's ugly as f, that's the problem.

Well, luckily, I've got the solution!

This tiny library allows you to easily execute JavaScript code in a webpage from your Chrome extension.

Usage

But how does it work? It is as simple as this:

exec(() => {
    console.log('This is the window of the current webpage:', window);
});

Nice, huh? I know!

Anyway, so that's more or less it. Best 500 bytes (unminified) your Chrome extension is going to get.

Installation

jsDelivr (Recommended)

I just love jsDelivr.

  1. Download the script from the this --> URL <--, and put it somewhere in your extension's folder:

  2. Go to your manifest file, make sure you have contentSettings permission, like this:

  "permissions": [
    "contentSettings"
  ]

Under content_scripts add a js array and insert the path to the library file as an item.

No worries, here's an example:

Assuming your script is in a folder called js:

"content_scripts": [
    {
      "js": [
        "js/execute-on-website.min.js",
        "./inject.js"
      ]
    }
  ]

It's as simple as that.

npm

Navigate to your extension's folder, and run the following command: (After making sure you have Node installed)

npm i chrome-extension-execute-on-website

Good, now go to your manifest.json, make sure you have contentSettings permission:

  "permissions": [
    "contentSettings"
  ]

Under content_scripts add js array and add the following path as an item:

node_modules/chrome-extension-execute-on-website/execute-on-website.js

And that should do the job. Here is an example:

"content_scripts": [
    {
      "js": [
        "node_modules/chrome-extension-execute-on-website/execute-on-website.js",
        "./inject.js"
      ]
    }
  ]

Sample Manifest

Here is an example of a full manifest, with the library included:

{
  "name": "My Extension",
  "version": "0.0.4",
  "manifest_version": 2,
  "description": "",
  "homepage_url": "http://eliran.net",
  "icons": {
    "16": "icons/Lightning16.png",
    "19": "icons/Lightning19.png",
    "48": "icons/Lightning48.png",
    "128": "icons/Lightning128.png"
  },
  "permissions": [
    "contentSettings"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "js/execute-on-website.min.js",
        "./inject.js"
      ]
    }
  ]
}



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap