chrome开发人员工具源代码

Question

I want to create my own color picker extention like color picker tool of chrome dev tool. Chrome's color picker tool is very nice. So my question is: how can i get chrome's color picker tool source code? Thanks a lot.

Answer 1

While Google Chrome is not an open source application, Chromioum is. You can download its entire open source here and try to extract the color pallet mechanisms .

Besides diving into this massive and complex code, you have plenty of other Javascript based color picker tools you can implement very easily. Take a look at JColor , which I'm using myself and very satisfied.

Using this Javascript library will be much more easier than extracting and implementing the dev tools color pallete, it's a 2 line implementation, which will give you pretty much the same functionality:

<script src="jscolor.js"></script>
Color: <input class="jscolor" value="ab2567">

Besides that, You can search for more Javascript libraries out in the vastness of the internet.

Answer 2

The color picker used in the devtool is a module listed here: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front_end/color_picker/

It is a relatively large module so I will not link it here nor recommend you to use it in your future extensions. However if you do have the patience, you can definitely pick out the parts that you need and use it under the licenses described in the files.

Answer 3

Eye Dropper Tool:

I believe the color picker you are refering to is Google Chrome Eye Dropper tool. After looking into it, I think I found a GitHub page with a verified source code of this type of tool, if this is what you were refering to.

Source Code:

Below are two links. The first link is to the Google Chrome Webstore page, where you will find the Eye Dropper Tool. If this is the tool you were refering to, then the second link will be the source code for it.

Here is the Tool: https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en

Here is the Source Code: https://github.com/kepi/chromeEyeDropper

Hopefully this helps you out!