분류 전체보기 검색 결과

178개 발견
  1. 미리보기
    2015.04.20 - mr.november11

    My Bookmarks

  2. 미리보기
    2015.04.20 - mr.november11

    VirtualBox에 CentOS6.6 설치 방법

My Bookmarks

2015. 4. 20. 23:08 - mr.november11

[크롬 익스텐션 개발하기]

Chrome Extension Sample page 소스분석

https://developer.chrome.com/extensions/samples


My Bookmarks

1. 프로그램 설명

해당 샘플은 크롬 함수를 통해 북마크 현황조회, 북마크 추가, 새 탭 생성으로 북마크 이동 기능을 지원한다.
북마크에 관련된 함수 위주의 샘플이기 때문에 크게 사용할일은 없을 것 같다.

2. 소스 설명

manifest.json

bookmark 접근 권한 설정, browser_action으로 버튼 선택 시 실행될 popup.html이 설정되어 있다.

{

  "name": "My Bookmarks",

  "version": "1.1",

  "description": "A browser action with a popup dump of all bookmarks, including search, add, edit and delete.",

  "permissions": [

    "bookmarks"

  ],

  "browser_action": {

      "default_title": "My Bookmarks",

      "default_icon": "icon.png",

      "default_popup": "popup.html"

  },

  "manifest_version": 2,

  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"

}


popup.html
div를 통해 각 영역의 이름만 선언되어있다.
실제 내부 코드는 코드는 popup.js에서 호출된다.
manifest.json은 popup.html을 호출하고, popup.html은 popup.js를 호출하는 방식
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="popup.js"></script>
</head>
<body style="width: 400px">
  <div>Search Bookmarks: <input id="search"></div>
  <div id="bookmarks"></div>
  <div id="editdialog"></div>
  <div id="deletedialog"></div>
  <div id="adddialog"></div>
</body>
</html>

popup.js

popup.js 로그 시 document.addEventListener 'DOMContentLoaded' 가 등록된다.
DOMContentLoaded는 웹페이지의 DOM 로딩 완료 후 호출된다. 
웹페이지에서 이미지 다운로드를 기다리기 전에 호출 되기 때문에 전체 페이지가 다 로딩되기 전에 실행된다.
DOM로딩이 완료될 시 dumpBookmarks 함수가 실행된다. 
dumpBookmarks 함수는 chrome.bookmarks.getTree 를 실행하여 현재 Chrome 브라우저에 설정된 Bookmark Tree를 받아온다.

이후 받아온 Bookmark 정보는 anchor 객체를 설정한 후 코드에 추가한다. 

var anchor = $('<a>');
    anchor.attr('href', bookmarkNode.url);
    anchor.text(bookmarkNode.title);
    /*
     * When clicking on a bookmark in the extension, a new tab is fired with
     * the bookmark url.
     */
    anchor.click(function() {
      chrome.tabs.create({url: bookmarkNode.url});
    });

// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Search the bookmarks when entering the search keyword.
$(function() {
  $('#search').change(function() {
     $('#bookmarks').empty();
     dumpBookmarks($('#search').val());
  });
});
// Traverse the bookmark tree, and print the folder and nodes.
function dumpBookmarks(query) {
  var bookmarkTreeNodes = chrome.bookmarks.getTree(
    function(bookmarkTreeNodes) {
      $('#bookmarks').append(dumpTreeNodes(bookmarkTreeNodes, query));
    });
}
function dumpTreeNodes(bookmarkNodes, query) {
  var list = $('<ul>');
  var i;
  for (i = 0; i < bookmarkNodes.length; i++) {
    list.append(dumpNode(bookmarkNodes[i], query));
  }
  return list;
}
function dumpNode(bookmarkNode, query) {
  if (bookmarkNode.title) {
    if (query && !bookmarkNode.children) {
      if (String(bookmarkNode.title).indexOf(query) == -1) {
        return $('<span></span>');
      }
    }
    var anchor = $('<a>');
    anchor.attr('href', bookmarkNode.url);
    anchor.text(bookmarkNode.title);
    /*
     * When clicking on a bookmark in the extension, a new tab is fired with
     * the bookmark url.
     */
    anchor.click(function() {
      chrome.tabs.create({url: bookmarkNode.url});
    });
    var span = $('<span>');
    var options = bookmarkNode.children ?
      $('<span>[<a href="#" id="addlink">Add</a>]</span>') :
      $('<span>[<a id="editlink" href="#">Edit</a> <a id="deletelink" ' +
        'href="#">Delete</a>]</span>');
    var edit = bookmarkNode.children ? $('<table><tr><td>Name</td><td>' +
      '<input id="title"></td></tr><tr><td>URL</td><td><input id="url">' +
      '</td></tr></table>') : $('<input>');
    // Show add and edit links when hover over.
        span.hover(function() {
        span.append(options);
        $('#deletelink').click(function() {
          $('#deletedialog').empty().dialog({
                 autoOpen: false,
                 title: 'Confirm Deletion',
                 resizable: false,
                 height: 140,
                 modal: true,
                 overlay: {
                   backgroundColor: '#000',
                   opacity: 0.5
                 },
                 buttons: {
                   'Yes, Delete It!': function() {
                      chrome.bookmarks.remove(String(bookmarkNode.id));
                      span.parent().remove();
                      $(this).dialog('destroy');
                    },
                    Cancel: function() {
                      $(this).dialog('destroy');
                    }
                 }
               }).dialog('open');
         });
        $('#addlink').click(function() {
          $('#adddialog').empty().append(edit).dialog({autoOpen: false,
            closeOnEscape: true, title: 'Add New Bookmark', modal: true,
            buttons: {
            'Add' : function() {
               chrome.bookmarks.create({parentId: bookmarkNode.id,
                 title: $('#title').val(), url: $('#url').val()});
               $('#bookmarks').empty();
               $(this).dialog('destroy');
               window.dumpBookmarks();
             },
            'Cancel': function() {
               $(this).dialog('destroy');
            }
          }}).dialog('open');
        });
        $('#editlink').click(function() {
         edit.val(anchor.text());
         $('#editdialog').empty().append(edit).dialog({autoOpen: false,
           closeOnEscape: true, title: 'Edit Title', modal: true,
           show: 'slide', buttons: {
              'Save': function() {
                 chrome.bookmarks.update(String(bookmarkNode.id), {
                   title: edit.val()
                 });
                 anchor.text(edit.val());
                 options.show();
                 $(this).dialog('destroy');
              },
             'Cancel': function() {
                 $(this).dialog('destroy');
             }
         }}).dialog('open');
        });
        options.fadeIn();
      },
      // unhover
      function() {
        options.remove();
      }).append(anchor);
  }
  var li = $(bookmarkNode.title ? '<li>' : '<div>').append(span);
  if (bookmarkNode.children && bookmarkNode.children.length > 0) {
    li.append(dumpTreeNodes(bookmarkNode.children, query));
  }
  return li;
}

document.addEventListener('DOMContentLoaded', function () {
  dumpBookmarks();
});

'Chrome Extension' 카테고리의 다른 글

Event Page Example  (0) 2015.05.02
A browser action with a popup that changes the page color  (0) 2015.05.02
A browser action which changes its icon when clicked  (0) 2015.05.02
Print this page  (0) 2015.04.29
Page Redder  (0) 2015.04.21

다른 카테고리의 글 목록

Chrome Extension 카테고리의 포스트를 톺아봅니다

VirtualBox에 CentOS6.6 설치 방법

2015. 4. 20. 22:47 - mr.november11

1. VirtualBox 다운로드 

https://www.virtualbox.org/wiki/Downloads

Virtual Box 공식 홈페이지에서 각 OS에 맞춰 다운로드 한다. 

2. CentOS 6.6 Image 다운로드
http://wiki.centos.org/Download
현재 공식 사이트 Download 버튼에서는 CentOS 7.0버전만 다운로드 가능하다.
'More download choices' 로 들어가 6.6 버전을 선택하여 다운받는다.

3. VirtuaBox 설치 후 VM만들기
특별히 신경쓸 내용 없이 Next Step을 진행하면 된다. 


* OS 초기 설치 부팅 시 아래 메시지가 나타나는 경우

This kernel requires an x86-64 CPU, but only detected an i686 CPU.
Unable to boot - please use a krenel appropirate for your CPU.

설치 당시의 데스크탑 OS 환경이 윈도우7 64bit였는데 위와 같은 메시지가 나타났다.
VirtualBox는 데스크탑의 32, 64bit 환경을 맞춰줘야 하는건가? ..
일단 큰 고민 없이 ..그냥 초기 VM이미지 생성을 그냥 64bit로 해주니 잘 진행된다.

64bit로 생성한 이미지가 32비트 환경의 데스크탑에서 잘 실행될지는 미지수다.. 
아마 안 될 것 같다.









다른 카테고리의 글 목록

Linux 카테고리의 포스트를 톺아봅니다