精华内容
下载资源
问答
  • chrome 扩展程序

    2018-06-11 21:07:00
    因为最近需要使用vue或别的一些扩展程序便利开发, 但无法FQ,只能到github下源码自己安装,而且不 懂扩展程序的原理,很...写好的chrome扩展程序直接点击已解压扩展程序加载即可使用。 github:测试例子 ...

    因为最近需要使用vue或别的一些扩展程序便利开发,

    但无法FQ,只能到github下源码自己安装,而且不

    懂扩展程序的原理,很容易安装出问题。

     

    API:360翻译的文档

    chrome的扩展文件主要看配置文件manifest.json。

    只要这个对,一般都没有问题。

     

     写好的chrome扩展程序直接点击已解压扩展程序加载即可使用。

     

    github:测试例子

     

    资料:干货

     

    对于一次性请求与响应模式,chrome.runtime.sendMessage(obj, function(response){})是从content scripts发生请求消息给Google Chrome扩展程序页面。

    从Google Chrome扩展程序页面发送请求消息给content scripts的时候,需要给出当前tab的ID。

    chrome.tabs.query(
        {active: true, currentWindow: true}, 
        function(tabs) {
              chrome.tabs.sendMessage(
                tabs[0].id, 
                {greeting: "hello"}, 
                function(response) {
                        console.log(response.farewell);
            });
    });

     

    转载于:https://www.cnblogs.com/zhangzhicheng/p/9169246.html

    展开全文
  • Chrome扩展程序

    2018-08-06 11:51:35
    Chrome扩展程序   WhatFont —— 名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法,这样你就可以为己所用了。 Pesticide—— 修改CSS的绝佳程序。当我试着学习匣子模型的时候,它简直就是...

    Chrome扩展程序

     

    • WhatFont —— 名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法,这样你就可以为己所用了。

    • Pesticide—— 修改CSS的绝佳程序。当我试着学习匣子模型的时候,它简直就是救命稻草般的存在。

    • Colorzilla ——用于复制确切颜色的一个网站,用它可以将颜色直接复制到剪贴板上,这样你就没必要花太多时间获得正确的RGBA组合了。

            

           

    • CSS Peeper——查看网站使用的颜色时非常方便。在你一开始山寨你认为酷的网站的时候很管用。这个程序能让你查看它们的幕后的色彩方案。

    • Wappalyzer ——想要获悉你在网站上看到的是什么技术,这个程序很有用。想知道某网站使用什么样的框架或者它承载了什么服务?这个照样管用。

    • React Dev Tools——一款用于调试应用程序的工具。有一点要提一下,它只有在你编写React程序时才有用。

    • Redux Dev Tools——一款用于调试应用程序的工具。有一点要提一下,它只有在你编写Redux程序时才有用。

    • JSON Formatter ——让JSON在浏览器中看起来更一目了然的不二之选。也许麻烦的JSON让你苦不堪言,不过只要用了这个软件,找到你要找的东西,所花费的时间会大幅缩短。

    • Vimeo Repeat and Speed ——加速Vimeo视频的绝佳工具。如果你像大多数的web开发人员一样观看视频教程,你就会知道用1.25倍的常规回放速度观看它们是多么的方便。本程序同时也有适用于YouTube的版本。

     

     

     

     


     

    展开全文
  • chrome扩展程序by Erika Tan 谭咏麟 如何创建Chrome扩展程序 (How to create a Chrome Extension) In this article, I will be teaching you how to make a Chrome Extension of your own. I’m basing it off of ...

    chrome扩展程序

    by Erika Tan

    谭咏麟

    如何创建Chrome扩展程序 (How to create a Chrome Extension)

    In this article, I will be teaching you how to make a Chrome Extension of your own. I’m basing it off of lessons learned while creating TalkToMe, a Chrome Extension that helps the visually impaired by reading website content and navigating to other web pages.

    在本文中,我将教您如何制作自己的Chrome扩展程序 。 我以创建TalkToMe (Chrome扩展程序)的经验教训为基础 ,该程序是Chrome扩展程序,可通过阅读网站内容并导航到其他网页来帮助视障人士。

    I’m going to cover the basics of setting up your extension, including:

    我将介绍设置扩展程序的基础知识,包括:

    • Configuring the files for setup

      配置文件进行设置
    • Getting it ready to put onto the Chrome store

      准备将其放入Chrome商店

    I won’t be covering how to manage audio features, such as handling mic permissions. This has been covered in this article by my friend Palash and also uses the TalkToMe extension as an example.

    我不会介绍如何管理音频功能,例如处理麦克风权限。 我的朋友Palash在本文对此进行了介绍 ,并以TalkToMe扩展为例。

    配置文件进行设置 (Configuring the files for setup)

    First, go to chrome://extensions in your browser, or simply click “More Tools” and “Extensions” on the Chrome menu. This should lead you to the Extension Management page, where you can turn on Developer Mode (it should be in the top right corner).

    首先,在浏览器中转到chrome:// extensions ,或直接在Chrome菜单上单击“更多工具”和“扩展程序”。 这将带您进入“扩展管理”页面,您可以其中打开“开发人员模式” (它应该在右上角)。

    Then, you’ll need to make a manifest.json file in a new directory for your extension. This file provides important information for your extension to function, such as permissions and the script files that you’ll be linking your project to. This is what the contents of your manifest should look like:

    然后,您需要在新目录中为扩展名创建一个manifest.json文件。 该文件为您的功能扩展提供了重要信息,例如权限和您将项目链接到的脚本文件。 这是清单的内容应如下所示:

    {    "name": "Chrome Extension Example",    "version": "1.0",    "description": "Build an Extension!",    "manifest_version": 2}

    To upload your directory to the Extension Management page, click the “Load Unpacked” button and select your directory. This will link your files to the web-based UI.

    要将目录上传到“扩展管理”页面,请单击“加载解压缩”按钮,然后选择目录。 这会将您的文件链接到基于Web的UI。

    Another important file that you’ll have to configure is background.js, which is the background script of your project.

    您必须配置的另一个重要文件是background.js ,它是项目的后台脚本。

    A sample background script has this type of structure:

    示例背景脚本具有以下类型的结构:

    chrome.runtime.onInstalled.addListener(function() {    // add an action here});

    It will always be running while your extension is turned on and is useful for listening to different events, such as keyboard presses, or for navigating to different pages.

    它会在您的扩展程序打开时始终运行,对于侦听不同事件(例如键盘按键)或导航到不同页面很有用。

    You can even have multiple background scripts. You just need to register all of them in your manifest file first. To do this, simply structure manifest.js like this, which is what the manifest file to our extension looks like:

    您甚至可以拥有多个后台脚本。 您只需要先在清单文件中注册所有这些文件即可。 为此,只需像这样构造manifest.js ,这就是我们扩展名的清单文件的样子:

    {    "name": "Chrome Extension Example",    ...
    "background": {        "scripts": [            "js/es6-promise.auto.min.js",            "js/defaults.js",            "js/speech.js",            "js/document.js",            "js/events.js",            "js/stt.js",            "js/listen.js"        ],        "persistent": false    }}

    Now, you’ll need a file for not just the function of your extension, but also the UI. To do this, make a file called popup.html. The popup is a small window that appears once your extension icon is clicked. For example, here’s the popup for the Cookie Manager Firefox extension.

    现在,您不仅需要用于扩展功能的文件,还需要用于UI的文件。 为此,请创建一个名为popup.html的文件。 弹出窗口是一个小的窗口,单击扩展图标后便会出现。 例如,这是Cookie Manager Firefox扩展的弹出窗口。

    The popup.html file can be quite simple. Below is some code to make a popup with a single button. It’s as easy as adding opening and closing button tags into the body of the document and a few style rules.

    popup.html文件可能非常简单。 以下是一些使单个按钮弹出的代码。 就像在文档正文中添加打开和关闭按钮标签以及一些样式规则一样简单。

    <!DOCTYPE html>  <html>    <head>      <style>        button {          height: 30px;          width: 30px;          outline: none;        }      </style>    </head>;    <body>      <button></button>    </body>  </html>

    Of course, the popup.html code for our extension has many more components than this. Feel free to add more buttons, stylesheets, and anything else you see fit for your extension idea.

    当然,我们扩展的popup.html代码具有更多的组件。 随意添加更多按钮,样式表以及您认为适合扩展概念的任何其他内容。

    Time to configure the popup code and the icon. For the icon, however, you’ll need to add code into two places, “default_icon” and “icons”. The “default_icon” property is used for toolbar icons, and “icons” is used for the images displayed on the Extension Management page.

    是时候配置弹出代码和图标了。 但是,对于该图标,您需要将代码添加到“ default_icon”和“ icons”两个位置。 “ default_icon”属性用于工具栏图标,“ icons”用于“扩展管理”页面上显示的图像。

    Go back to manifest.json and add in the following lines of code, replacing the image paths for the default icon with your own images. You can also put the same images in for both “default_icon” and “icons”. And, you don’t need to put in pictures of the same dimensions as the ones specified below. For example, if you only have images that are 16 x 16 and 48 x 48, feel free to delete the other two lines that specify 32 and 128 pixels.

    返回manifest.json并添加以下代码行,用您自己的图像替换默认图标的图像路径。 您也可以为“ default_icon”和“ icons”放入相同的图像。 而且,您不需要放入与以下指定尺寸相同的尺寸的图片。 例如,如果您只有16 x 16和48 x 48的图像,请随时删除指定32和128像素的其他两行。

    {   "name": "Chrome Extension Example",    ...
    "page_action": {        "default_popup": "popup.html",        "default_icon": {            "16": "images/img16.png",            "32": "images/img32.png",            "48": "images/img48.png",            "128": "images/img128.png"        }    },    "icons": {        "16": "images/img16.png",        "32": "images/img32.png",        "48": "images/img48.png",        "128": "images/img128.png"    }}

    So these are the files that are essential in building a chrome extension:

    因此,这些是构建chrome扩展程序必不可少的文件:

    • a manifest file,

      清单文件
    • background scripts, and

      后台脚本,以及
    • a popup file

      一个弹出文件

    Some other files that you might want to configure are:

    您可能要配置的其他一些文件是:

    • options.html and

      options.html

    • options.js

      options.js

    options.js will give your users a wider variety of options when it comes to using your extension. It will take care of how your options page looks (it’s very similar to popup.html), while options.js will handle the functionality.

    options.js将为您的用户提供使用扩展程序的更多选择。 它将照顾您的选项页面的外观(与popup.html非常相似),而options.js将处理该功能。

    These files are optional, but if you decide to add them, don’t forget to configure options.html in the manifest and link your options.js file by adding <script src=”options.js”><;/script> right before your ending HTML tag.

    这些文件是可选的,但是如果您决定添加它们,请不要忘记在清单中配置options.html并通过在右边添加<script src=”options.js”>< ; / script>来链接options.js文件<script src=”options.js”><在结束HTML标记之前。

    {    "name": "Chrome Extension Example",    ...    "options_page": "options.html"}

    To see your extension in action, save all of your files and click “Reload” while you’re on the Extension Management page. You should see your icon in the toolbar. To view your options page, you can also click “Details” under your extension and scroll down to where it says “Extension options”.

    要查看扩展程序的运行情况,请保存所有文件,然后在“扩展程序管理”页面上单击“重新加载”。 您应该在工具栏中看到您的图标。 要查看您的选项页面,您还可以单击扩展程序下的“详细信息”,然后向下滚动到显示“扩展程序选项”的位置。

    将您的项目发布到网上商店 (Publishing your project to the web store)

    So you’ve developed and tested your extension. Now you need to distribute it!

    因此,您已经开发并测试了扩展程序。 现在您需要分发它!

    To begin uploading your project, first convert it to a .zip file. The file should, at a minimum, contain the manifest.json file. Then, make sure you have a developer account by visiting the Chrome Webstore Developer Dashboard.

    要开始上传您的项目,请先将其转换为.zip文件。 该文件至少应包含manifest.json文件。 然后,通过访问Chrome Webstore开发人员信息中心来确保您拥有开发者帐户。

    Click the “Add new item” button and it should let you upload your .zip file there. Unless you want to register payments for your app, you can skip the step about setting up a payment system. You will have to pay a $5 one-time developer fee, however, when you put your project onto the web store.

    单击“添加新项目”按钮,它应该可以让您将.zip文件上传到此处。 除非您要为您的应用程序注册付款,否则可以跳过有关设置付款系统的步骤。 但是,当您将项目放到网上商店时,必须支付5美元的一次性开发人员费用。

    Also, don’t forget to include a detailed description and pictures of your extension so that potential users will know exactly what your project does!

    另外,不要忘记提供扩展的详细说明和图片,以便潜在用户确切知道您的项目在做什么!

    Once all of this is complete, you’ll receive an app ID and an OAuth token. The app ID is used for making requests to Google APIs, while the OAuth token is used for making Web Store payments.

    完成所有这些操作后,您将收到一个应用ID和一个OAuth令牌。 应用程序ID用于向Google API发送请求,而OAuth令牌用于向Web Store付款。

    Congratulations, you have now published your extension! ?

    恭喜,您现在已经发布了扩展程序! ?

    If you enjoyed this post, check out this next article. We’ll be diving deeper into how to configure audio features in your Chrome extension, just like we did for TalkToMe.

    如果您喜欢这篇文章,请查看下一篇文章 。 就像我们对TalkToMe所做的一样,我们将深入研究如何在Chrome扩展程序中配置音频功能。

    翻译自: https://www.freecodecamp.org/news/how-to-create-a-chrome-extension-part-1-ad2a3a77541/

    chrome扩展程序

    展开全文
  • chrome扩展程序

    2019-07-26 17:08:52
    第一步: 在谷歌浏览器里找到 第二布:打开这个扩展程序 开发者模式那个向右是打开模式 第三步:(没有科学上网前)找到你想要的扩展程序后 点这个按钮,选择对应的文件夹就行了 ...

    第一步:
    在谷歌浏览器里找到

    在这里插入图片描述
    在这里插入图片描述
    第二布:打开这个扩展程序
    在这里插入图片描述
    开发者模式那个向右是打开模式

    第三步:(没有科学上网前)找到你想要的扩展程序后
    在这里插入图片描述
    点这个按钮,选择对应的文件夹就行了

    展开全文
  • chrome扩展程序For more on working with Chrome extensions, watch our video tutorial Interacting with Browser Content From Your Chrome Extension. 有关使用Chrome扩展程序的更多信息,请观看我们的视频教程...
  • chrome扩展程序We all like surfing the web. And we all like things to be at the touch of our fingertips. Why not create something that caters to these two absolute truths? 我们都喜欢上网。 而且我们都...
  • chrome扩展程序In my previous article I wrote, I talked about the building blocks of a Chrome extension. Now, I would like to focus on the other part of building a Chrome extension: what to do when you...
  • chrome扩展程序by Jake Prins 杰克·普林斯(Jake Prins) 如何在20分钟内创建和发布Chrome扩展程序 (How to Create and Publish a Chrome Extension in 20 minutes) Ever wondered what it would be like to create...
  • Google Chrome 扩展程序

    2016-11-06 13:56:37
    Google Chrome 扩展程序
  • 投票Chrome扩展程序
  • chrome扩展程序科学Chrome extensions are fantastic, useful species of software that you can add to your Chrome browser — if you use chrome — to speed up and facilitate everyday tasks. Chrome扩展程序...
  • chrome扩展程序Recently I looked into improving the vocal recognition instance of my chrome extension, orange. Basically, it allows the user to control a webpage with their voice. Primarily I use it to...
  • Chrome扩展程序.rar

    2020-08-06 22:18:50
    chrome扩展程序,包含API调试工具Talend API Tester、postname、JsonViewer、截图等
  • chrome扩展程序Chrome extensions have been under heavy scrutiny over the couple of years due to security risks, but Google is looking to change that with upcoming granular permission control....
  • Piktab是一个免费的Chrome扩展程序,可直接在您的浏览器中展示最新的设计赠品 。 每次您打开一个新标签时,您都会瞥见网络上最热门的设计赠品 。 这对于有抱负的Web设计师 ,移动应用程序设计师和图形设计师也是...
  • chrome扩展程序Ads are a part of life on the Internet, but when an unscrupulous extension starts purposely injecting ads into your browsing experience, then it is time to take action! Today’s Super...
  • chrome扩展程序安装Much of Chrome’s power and flexibility comes from its huge ecosystem of extensions. The problem is that these extensions can also steal data, watch your every move, or worse. Here’...
  • chrome扩展程序介绍(Introduction) The Chrome web browser is very extensible. It seems like there is a plugin for just about everything you could ever possibly want.Chrome网络浏览器具有很好的可扩展性。 ...
  • 用于Redux-Saga Devtools的Chrome扩展程序
  • chrome扩展程序Google Chrome normally updates your extensions automatically, but when you see the news about a new extension version, you want it right now. Here’s how to force Chrome to upgrade all ...
  • Chrome扩展程序入门

    2019-09-21 09:01:04
    很多人习惯称Chrome扩展程序为Chrome插件,但其实这样的称呼不准确,因为Google官方的命名是Chrome Extensions,即Chrome扩展程序。 1 前言 Chrome浏览器有很多好用的扩展程序,功能强大,开发起来有很容易...
  • chrome扩展程序直接进入教室
  • chrome-extensions:很棒的Chrome扩展程序
  • chrome扩展程序 本文由Marc Towler进行同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! 将文本转换为语音,也称为语音合成或TTS(文本转语音),是一种产生人类语音的人工方式。 这并不是...
  • twitter-md-chrome:将Twitter扩展为png。 Chrome扩展程序
  • chrome扩展程序安装Google Chrome extensions that say “Installed by Enterprise Policy” do not let you uninstall them because they install with elevated permissions. If you’re part of an Enterprise or...
  • chrome扩展程序We’ve reached a point where new data breaches are announced on what seems like a weekly basis. It’s almost impossible to keep up with all the breaches and your password situation, but ...
  • Chrome 扩展程序 OSChina Notifier 可以显示用户在开源中国的未读消息数 截图如下: chrome商店地址:https://chrome.google.com/webstore/detail/oschina-notifier/okphpdhjakgckekfkhkjkkgddolnmfag ...
  • <p>chrome扩展程序怎么写?chrome扩展程序怎么写?多数双核浏览器为chrome核,IE浏览器是否支持?</p>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,442
精华内容 2,176
关键字:

chrome扩展程序