Chrome扩展中对象方法无法访问自定义String原型方法怎么办

Chrome扩展的各个运行上下文是完全隔离的：service worker、popup页面、content script隔离世界、注入到页面的主世界脚本，各自有独立的全局对象，连String、Object这类内置构造函数都是各自独立的。你在service worker里修改String.prototype，只对service worker自身上下文里的String实例生效，其他上下文不会自动继承这个修改。

你提到popup、content script、service worker里都能正常调用，说白了就是你在这几个上下文加载的脚本中都执行过原型挂载代码，唯独sampleobject.js所在的运行上下文没有提前跑过这段代码：

• 要么是你没把原型扩展代码放到sampleobject.js的加载顺序前面，调用方法的时候原型还没被修改
• 要么是sampleobject.js运行在页面主世界（比如通过动态插入<script>标签注入的页面脚本），和扩展的上下文完全隔离，你在扩展侧修改的String和主世界的String根本不是同一个对象
• 小概率情况是userObject是跨上下文传递过来的对象，它的id属性是其他上下文生成的String实例，原型链上自然没有你挂载的方法

另外你贴的SampleObject代码有语法笔误，对象方法doStringThings缺少函数声明的括号/冒号，正式运行前要先修正这个问题。

按靠谱程度排序：

• 最稳妥零坑方案：别改内置原型，抽成独立工具函数
  直接把字符串处理逻辑做成独立的工具函数，完全不依赖原型链，从根源上规避上下文隔离带来的问题，也不会污染内置对象造成全局命名冲突：

// 公共工具函数，所有用到该逻辑的上下文都加载这段代码
function norm_to_ascii(str) {
  return unescape(encodeURIComponent(str))
}

// 调用时直接传入字符串参数即可
var SampleObject = {
   test: 0,
   doStringThings() {
      let something = norm_to_ascii(userObject.id)
   }
}

• 非要用原型方法写法的话：保证每个运行上下文都提前加载原型扩展代码
  先梳理清楚所有用到这个方法的JS文件分别运行在哪个上下文，把String.prototype.norm_to_ascii的定义代码放到每个上下文加载脚本列表的最顶部，保证所有调用该方法的代码执行前，原型已经被正确修改。如果sampleobject.js是注入到页面主世界的脚本，原型扩展代码也必须一起注入到主世界上下文执行，不能只在扩展侧的service worker或content script里定义。

提醒：修改内置对象原型本身存在潜在风险，比如和其他脚本的同名方法冲突、后续JS标准新增同名方法导致逻辑异常，非必要不推荐这种写法。

内容的提问来源于stack exchange，提问作者Ryan H